@mijn-ui/react-core - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/theme.css

+@theme {
+  /* Default */
+  --color-bg-default: hsl(0 0 100%);
+  --color-bg-default-alt: hsl(0 0 100%);
+  --color-fg-default: hsl(240 10% 4%);
+  --color-outline-default: hsl(240 5% 84%);
+
+  /* Secondary */
+  --color-bg-secondary: hsl(240 5% 96%);
+  --color-fg-secondary: hsl(240 5% 26%);
+  --color-outline-secondary: hsl(240 6% 90%);
+
+  /* Tertiary */
+  --color-bg-tertiary: hsl(240 6% 90%);
+  --color-bg-tertiary-alt: hsl(240 6% 90%);
+  --color-outline-tertiary: hsl(240 5% 96%);
+  --color-fg-tertiary: hsl(240 4% 46%);
+
+  /* Inverse */
+  --color-bg-inverse: hsl(240 10% 4%);
+  --color-fg-inverse: hsl(0 0 98%);
+  --color-outline-inverse: hsl(240 5% 26%);
+
+  /* Brand (Button and Action Colors) */
+  --color-bg-brand: hsl(21 90% 48%);
+  --color-on-bg-brand: hsl(20 100% 96%);
+  --color-outline-brand: hsl(20 88% 40%);
+  --color-bg-brand-subtle: hsl(20 100% 92%);
+  --color-on-bg-brand-subtle: hsl(20 75% 28%);
+  --color-outline-brand-subtle: hsl(21 98% 83%);
+  --color-fg-brand: hsl(20 88% 40%);
+
+  /* Success */
+  --color-bg-success: hsl(142 76% 36%);
+  --color-on-bg-success: hsl(143 76% 97%);
+  --color-outline-success: hsl(142 72% 29%);
+  --color-bg-success-subtle: hsl(143 84% 93%);
+  --color-on-bg-success-subtle: hsl(142 61% 20%);
+  --color-outline-success-subtle: hsl(142 79% 85%);
+  --color-fg-success: hsl(142 72% 29%);
+
+  /* Warning */
+  --color-bg-warning: hsl(41 96% 40%);
+  --color-on-bg-warning: hsl(41 92% 95%);
+  --color-outline-warning: hsl(41 92% 33%);
+  --color-bg-warning-subtle: hsl(41 97% 88%);
+  --color-on-bg-warning-subtle: hsl(40 73% 26%);
+  --color-outline-warning-subtle: hsl(41 98% 77%);
+  --color-fg-warning: hsl(41 92% 33%);
+
+  /* Danger */
+  --color-bg-danger: hsl(0 72% 51%);
+  --color-on-bg-danger: hsl(0 86% 97%);
+  --color-outline-danger: hsl(0 74% 42%);
+  --color-bg-danger-subtle: hsl(0 93% 94%);
+  --color-on-bg-danger-subtle: hsl(0 63% 31%);
+  --color-outline-danger-subtle: hsl(0 96% 89%);
+  --color-fg-danger: hsl(0 74% 42%);
+
+  /* Radius */
+  --radius-2xs: 0.125rem; /* 2px */
+  --radius-xs: 0.25rem; /* 4px */
+  --radius-sm: 0.375rem; /* 6px */
+  --radius-base: 0.5rem; /* 8px */
+  --radius-lg: 0.75rem; /* 12px */
+  --radius-xl: 1rem; /* 16px */
+  --radius-2xl: 1.25rem; /* 20px */
+  --radius-full: 9999px;
+
+  /* Shadow */
+  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-sm:
+    0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-md:
+    0 4px 8px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.06);
+  --shadow-lg:
+    0 12px 16px rgba(16, 24, 40, 0.08), 0 4px 6px rgba(16, 24, 40, 0.03);
+  --shadow-xl:
+    0 20px 24px rgba(16, 24, 40, 0.08), 0 8px 8px rgba(16, 24, 40, 0.03);
+  --shadow-2xl: 0 24px 48px rgba(16, 24, 40, 0.18);
+  --shadow-3xl: 0 32px 64px rgba(16, 24, 40, 0.14);
+}
+
+.dark {
+  /* Default */
+  --color-bg-default: hsl(240 10% 4%);
+  --color-bg-default-alt: hsl(240 4% 16%);
+  --color-outline-default: hsl(240 5% 26%);
+  --color-fg-default: hsl(0 0 100%);
+
+  /* Tertiary */
+  --color-bg-tertiary: hsl(240 4% 16%);
+  --color-bg-tertiary-alt: hsl(240 10% 4%);
+  --color-outline-tertiary: hsl(240 6% 10%);
+  --color-fg-tertiary: hsl(240 4% 46%);
+
+  /* Inverse */
+  --color-bg-inverse: hsl(0 0 100%);
+  --color-outline-inverse: hsl(240 5% 84%);
+  --color-fg-inverse: hsl(240 10% 4%);
+
+  /* Brand (Button and Action Colors) */
+  --color-bg-brand: hsl(20 96% 61%);
+  --color-on-bg-brand: hsl(21 81% 15%);
+  --color-outline-brand: hsl(20 96% 61%);
+  --color-bg-brand-subtle: hsl(20 75% 28%);
+  --color-on-bg-brand-subtle: hsl(20 100% 92%);
+  --color-outline-brand-subtle: hsl(21 79% 34%);
+  --color-fg-brand: hsl(20 96% 61%);
+
+  /* Secondary */
+  --color-bg-secondary: hsl(240 6% 10%);
+  --color-outline-secondary: hsl(240 4% 16%);
+  --color-fg-secondary: hsl(240 5% 84%);
+
+  /* Success */
+  --color-bg-success: hsl(142 69% 58%);
+  --color-on-bg-success: hsl(142 80% 10%);
+  --color-outline-success: hsl(142 69% 58%);
+  --color-bg-success-subtle: hsl(142 61% 20%);
+  --color-on-bg-success-subtle: hsl(143 84% 93%);
+  --color-outline-success-subtle: hsl(142 64% 24%);
+  --color-fg-success: hsl(142 69% 58%);
+
+  /* Warning */
+  --color-bg-warning: hsl(41 96% 53%);
+  --color-on-bg-warning: hsl(41 83% 14%);
+  --color-outline-warning: hsl(41 96% 53%);
+  --color-bg-warning-subtle: hsl(40 73% 26%);
+  --color-on-bg-warning-subtle: hsl(41 97% 88%);
+  --color-outline-warning-subtle: hsl(41 81% 29%);
+  --color-fg-warning: hsl(41 96% 53%);
+
+  /* Danger */
+  --color-bg-danger: hsl(0 91% 71%);
+  --color-on-bg-danger: hsl(0 75% 15%);
+  --color-outline-danger: hsl(0 91% 71%);
+  --color-bg-danger-subtle: hsl(0 63% 31%);
+  --color-on-bg-danger-subtle: hsl(0 93% 94%);
+  --color-outline-danger-subtle: hsl(0 70% 35%);
+  --color-fg-danger: hsl(0 91% 71%);
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 Animations                                 */
+/* -------------------------------------------------------------------------- */
+@theme {
+  --animate-fade-in: fade-in 300ms ease;
+  --animate-fade-out: fade-out 300ms ease;
+  --animate-scale-in: scale-in 300ms ease;
+  --animate-scale-out: scale-out 300ms ease;
+  --animate-accordion-open:
+    accordion-open 0.2s ease-in-out, fade-in 0.4s ease-in-out;
+  --animate-accordion-close:
+    accordion-close 0.2s ease-in-out, fade-out 0.4s ease-in-out;
+  --animate-collapsible-open:
+    collapsible-open 0.2s ease-in-out, fade-in 0.4s ease-in-out;
+  --animate-collapsible-close:
+    collapsible-close 0.2s ease-in-out, fade-out 0.4s ease-in-out;
+  --animate-dialog-open: dialog-open 300ms ease;
+  --animate-dialog-close: dialog-close 300ms ease;
+  --animate-popover-open: popover-open 300ms ease;
+  --animate-popover-close: popover-close 300ms ease;
+
+  /* Keyframes */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      transform: scale(0.5);
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes scale-out {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(0.5);
+    }
+  }
+
+  @keyframes accordion-open {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-close {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes collapsible-open {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapsible-close {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes dialog-open {
+    from {
+      transform: scale(0.95) translate(-50%, 0);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1) translate(-50%, 0);
+    }
+  }
+
+  @keyframes dialog-close {
+    from {
+      transform: scale(1) translate(-50%, 0);
+    }
+    to {
+      transform: scale(0.95) translate(-50%, 0);
+      opacity: 0;
+    }
+  }
+
+  @keyframes popover-open {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes popover-close {
+    from {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95) translateY(-10px);
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-outline-default;
+  }
+
+  body {
+    @apply bg-bg-default text-fg-default;
+  }
+}

dist/index.d.ts

@@ -1,5 +0,207 @@
-export { extendVariants } from './extend-variants.d.js';
-export { createTVUnstyledSlots } from './tv-unstyled-slots.js';
-export { applyUnstyled } from './unstyled.js';
-import 'react';
-import 'tailwind-variants';
+import * as React$1 from 'react';
+import { JSXElementConstructor, ReactElement } from 'react';
+import { OmitUndefined, ClassValue, StringToBoolean, ClassProp } from 'tailwind-variants';
+
+/* Adapted From NextUI ❤️ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+
+type SlotsClassValue<S> = {
+  [K in keyof S]?: ClassValue
+}
+
+type Variants<S> = {
+  [K: string]: {
+    [P: string]: S extends undefined ? ClassValue : SlotsClassValue<S>
+  }
+}
+
+type ComponentProps<C> = C extends JSXElementConstructor<infer P> ? P : never
+
+type ComponentSlots<CP> = CP extends { classNames?: infer S } ? S : undefined
+
+type ValidateSubtype<T, U> = OmitUndefined<T> extends U ? "true" : "false"
+
+type GetSuggestedValues<S> = S extends undefined
+  ? ClassValue
+  : SlotsClassValue<S>
+
+type SuggestedVariants<CP, S> = {
+  [K in keyof CP]?: ValidateSubtype<CP[K], string> extends "true"
+    ? { [K2 in CP[K]]?: GetSuggestedValues<S> }
+    : ValidateSubtype<CP[K], boolean> extends "true"
+      ? {
+          true?: GetSuggestedValues<S>
+          false?: GetSuggestedValues<S>
+        }
+      : never
+}
+
+type ComposeVariants<CP, S> = SuggestedVariants<CP, S> | Variants<S>
+
+type VariantValue<V, SV> = {
+  [K in keyof V | keyof SV]?:
+    | (K extends keyof V ? StringToBoolean<keyof V[K]> : never)
+    | (K extends keyof V ? StringToBoolean<keyof V[K]>[] : never)
+    | (K extends keyof SV
+        ? ValidateSubtype<SV[K], object> extends "true"
+          ? keyof OmitUndefined<SV[K]>
+          : never
+        : never)
+}
+
+type DefaultVariants<V, SV> = VariantValue<V, SV>
+
+type CompoundVariants<V, SV> = Array<
+  VariantValue<V, SV> & ClassProp<ClassValue>
+>
+
+type Options = {
+  /**
+   * Whether to merge the class names with `tailwind-merge` library.
+   * It avoids to have duplicate tailwind classes. (Recommended)
+   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
+   * @default true
+   */
+  twMerge?: boolean
+  /**
+   * The config object for `tailwind-merge` library.
+   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
+   */
+  twMergeConfig?: any
+}
+
+type ExtendVariants = {
+  <
+    C extends JSXElementConstructor<any>,
+    CP extends ComponentProps<C>,
+    S extends ComponentSlots<CP>,
+    V extends ComposeVariants<CP, S>,
+    SV extends SuggestedVariants<CP, S>,
+    DV extends DefaultVariants<V, SV>,
+    CV extends CompoundVariants<V, SV>,
+  >(
+    BaseComponent: C,
+    styles: {
+      variants?: V
+      defaultVariants?: DV
+      compoundVariants?: CV
+      slots?: S
+    },
+    opts?: Options,
+  ): (props: {
+    [key in keyof CP | keyof V]?:
+      | (key extends keyof CP ? CP[key] : never)
+      | (key extends keyof V ? StringToBoolean<keyof V[key]> : never)
+  }) => ReactElement
+}
+
+// main function
+declare const extendVariants: ExtendVariants
+
+/**
+ * Creates unstyled slot functions that dynamically adapt to the arguments
+ * of the original slot functions provided in `styleSlots`.
+ *
+ * @template T - A record where values are functions with arbitrary arguments.
+ * @param styleSlots - A record of functions defining styles for each slot.
+ * @param unstyled - A flag to determine whether to apply unstyled mode.
+ *
+ * @returns A record of functions with the same arguments as the originals,
+ *          plus `className`, applying unstyled logic.
+ */
+declare const createTVUnstyledSlots: <T extends Record<string, (...args: any[]) => string | undefined>>(styleSlots: T, unstyled?: boolean) => { [K in keyof T]: (...args: Parameters<T[K]>) => string | undefined; };
+/**
+ * Conditionally applies CSS class names based on the `unstyled` flag.
+ *
+ * When the `unstyled` flag is `true`, only the `userClasses` are applied, effectively bypassing the default styles.
+ * If `unstyled` is `false`, both the `defaultClasses` and `userClasses` are combined to apply the full set of styles.
+ *
+ * @param unstyled - A boolean flag that indicates whether to bypass the default styling. If `true`, only user-defined classes are used.
+ * @param defaultClasses - The default Tailwind CSS classes that are applied when `unstyled` is `false`.
+ * @param userClasses - Optional additional classes provided by the user. These classes are always added to `defaultClasses`, unless `unstyled` is `true`.
+ *
+ * @returns A string containing the combined class names or only the `userClasses` if `unstyled` is `true`. If no `userClasses` are provided, the default classes are returned.
+ */
+declare const applyUnstyled: (unstyled: boolean | undefined, defaultClasses: string, userClasses?: string) => string | undefined;
+
+/**
+ * A utility hook for managing styled and unstyled variants with the `tailwind-variants` package.
+ *
+ * @template T - A record of style slots, where each slot is a function returning a class string.
+ *
+ * @param context - An object containing:
+ *  - `unstyled` (optional): A flag to disable default styling and only apply user-defined classes.
+ *  - `styles`: A required record of style slots, each slot being a function returning class strings.
+ *
+ * @param unstyledOverride - Optional override for the `unstyled` flag.
+ *
+ * @returns An object containing:
+ *  - `isUnstyled`: A boolean indicating whether unstyled mode is active.
+ *  - Styled slot functions: Functions for each style slot, combining default and user-defined classes
+ *    when unstyled mode is off, or only applying user-defined classes otherwise.
+ */
+declare const useTVUnstyled: <T extends Record<string, (options?: {
+    className?: string;
+}) => string | undefined>>(context: {
+    unstyled?: boolean;
+    styles: T;
+}, unstyledOverride?: boolean) => {
+    isUnstyled: boolean | undefined;
+} & { [K in keyof T]: (...args: Parameters<T[K]>) => string | undefined; };
+
+/**
+ * Merges multiple React refs into a single ref callback.
+ * The merged ref callback can be used to assign a value to multiple refs simultaneously.
+ *
+ * @template T - The type of the ref value.
+ * @param refs - An array of React refs to be merged.
+ * @returns A ref callback that assigns a value to all the merged refs.
+ */
+declare function mergeRefs<T>(refs: Array<React.Ref<T> | undefined | null>): React.RefCallback<T>;
+
+interface CreateContextOptions {
+    /**
+     * If `true`, React will throw if context is `null` or `undefined`
+     * In some cases, you might want to support nested context, so you can set it to `false`
+     */
+    strict?: boolean;
+    /**
+     * Error message to throw if the context is `undefined`
+     */
+    errorMessage?: string;
+    /**
+     * The display name of the context
+     */
+    name?: string;
+}
+type CreateContextReturn<T> = [
+    React$1.Provider<T>,
+    () => T,
+    React$1.Context<T>
+];
+/**
+ * Creates a named context, provider, and hook.
+ *
+ * @param options create context options
+ */
+declare function createContext<ContextType>(options?: CreateContextOptions): CreateContextReturn<ContextType>;
+
+/**
+ * This Typescript utility transform a list of slots into a list of {slot: classes}
+ */
+type SlotsToClasses<S extends string> = {
+    [key in S]?: ClassValue;
+};
+/**
+ * Type for components that support unstyled functionality and slot-specific classes.
+ */
+type UnstyledComponentWithSlots<S extends string> = {
+    unstyled?: boolean;
+} & {
+    classNames?: SlotsToClasses<S>;
+};
+
+declare function useControlledState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T) => void];
+
+export { type SlotsToClasses, type UnstyledComponentWithSlots, applyUnstyled, createContext, createTVUnstyledSlots, extendVariants, mergeRefs, useControlledState, useTVUnstyled };

dist/index.js

@@ -1,15 +0,238 @@
-import {
-  extendVariants
-} from "./chunk-S5PZZMIE.js";
-import "./chunk-CUPWOGUU.js";
-import {
-  createTVUnstyledSlots
-} from "./chunk-64KGWHB4.js";
-import {
-  applyUnstyled
-} from "./chunk-PYCMJISY.js";
+// src/extend-variants/extend-variants.js
+import * as React from "react";
+import clsx from "clsx";
+import { tv } from "tailwind-variants";
+
+// src/extend-variants/map-props-variants.ts
+var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
+  if (!variantKeys) {
+    return [props, {}];
+  }
+  const picked = variantKeys.reduce((acc, key) => {
+    if (key in props) {
+      return { ...acc, [key]: props[key] };
+    } else {
+      return acc;
+    }
+  }, {});
+  if (removeVariantProps) {
+    const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
+    return [omitted, picked];
+  } else {
+    return [props, picked];
+  }
+};
+
+// src/extend-variants/extend-variants.js
+function getSlots(variants) {
+  return variants ? Object.values(variants).flatMap(Object.values).reduce((acc, slot) => {
+    if (typeof slot === "object" && slot !== null && !(slot instanceof String)) {
+      Object.keys(slot).forEach((key) => {
+        if (!acc.hasOwnProperty(key)) {
+          acc[key] = "";
+        }
+      });
+    }
+    return acc;
+  }, {}) : {};
+}
+function getClassNamesWithProps({
+  props = {},
+  variants,
+  slots,
+  defaultVariants,
+  compoundVariants,
+  hasSlots,
+  opts
+}) {
+  const keys = [];
+  if (defaultVariants && typeof defaultVariants === "object") {
+    for (const key in defaultVariants) {
+      const value = defaultVariants[key];
+      const propValue = props?.[key];
+      if (propValue && propValue !== value) {
+        keys.push(key);
+      }
+    }
+  }
+  const customTv = tv(
+    {
+      variants,
+      defaultVariants: defaultVariants && typeof defaultVariants === "object" ? (
+        // Do not apply default variants when the props variant is different
+        Object.keys(defaultVariants).filter((k) => !keys.includes(k)).reduce((o, k) => {
+          o[k] = defaultVariants[k];
+          return o;
+        }, [])
+      ) : defaultVariants,
+      compoundVariants,
+      ...hasSlots && { slots }
+    },
+    {
+      twMerge: opts.twMerge ?? true,
+      twMergeConfig: opts.twMergeConfig ?? {}
+    }
+  );
+  const [baseProps, variantProps] = mapPropsVariants(
+    props,
+    customTv.variantKeys,
+    false
+  );
+  const newProps = { ...defaultVariants, ...baseProps };
+  let classNames = {};
+  const result = customTv(variantProps);
+  if (!hasSlots) {
+    newProps.className = clsx(result, props.className);
+  } else {
+    Object.entries(result).forEach(([key, value]) => {
+      const slotResult = value();
+      if (typeof slotResult === "string") {
+        classNames[key] = slotResult;
+      }
+    });
+    Object.entries(props.classNames ?? {}).forEach(([key, value]) => {
+      classNames[key] = clsx(classNames[key], value);
+    });
+  }
+  if (Object.keys(classNames).length !== 0) {
+    newProps.classNames = classNames;
+  }
+  return newProps;
+}
+function extendVariants(BaseComponent, styles = {}, opts = {}) {
+  const { variants, defaultVariants, compoundVariants } = styles || {};
+  const slots = getSlots(variants);
+  const hasSlots = typeof slots === "object" && Object.keys(slots).length !== 0;
+  const Component = (originalProps) => {
+    const newProps = getClassNamesWithProps({
+      slots,
+      variants,
+      compoundVariants,
+      props: originalProps,
+      defaultVariants,
+      hasSlots,
+      opts
+    });
+    return React.createElement(BaseComponent, {
+      ...originalProps,
+      ...newProps
+    });
+  };
+  if (BaseComponent.getCollectionNode) {
+    Component.getCollectionNode = (itemProps) => {
+      const newProps = getClassNamesWithProps({
+        slots,
+        variants,
+        compoundVariants,
+        props: itemProps,
+        defaultVariants,
+        hasSlots,
+        opts
+      });
+      return BaseComponent.getCollectionNode({ ...itemProps, ...newProps });
+    };
+  }
+  return Component;
+}
+
+// src/unstyled/tv-unstyled-slots.ts
+import { cnBase } from "tailwind-variants";
+var createTVUnstyledSlots = (styleSlots, unstyled) => {
+  return Object.keys(styleSlots).reduce(
+    (acc, key) => {
+      acc[key] = (...args) => {
+        const lastArg = args[args.length - 1];
+        const className = lastArg?.className;
+        const argsWithoutClassName = className ? args.slice(0, -1) : args;
+        return applyUnstyled(
+          unstyled,
+          styleSlots[key]?.(...argsWithoutClassName) || "",
+          className
+        );
+      };
+      return acc;
+    },
+    {}
+  );
+};
+var applyUnstyled = (unstyled, defaultClasses, userClasses) => {
+  return unstyled ? userClasses : cnBase(defaultClasses, userClasses);
+};
+
+// src/unstyled/use-tv-unstyled.ts
+var useTVUnstyled = (context, unstyledOverride) => {
+  const { unstyled, styles } = context;
+  const isUnstyled = unstyledOverride ?? unstyled;
+  const styledFunctions = createTVUnstyledSlots(styles, isUnstyled);
+  return {
+    isUnstyled,
+    ...styledFunctions
+  };
+};
+
+// src/utils/functions.ts
+function mergeRefs(refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref && "current" in ref) {
+        ;
+        ref.current = value;
+      }
+    });
+  };
+}
+
+// src/utils/create-context.ts
+import * as React2 from "react";
+function createContext2(options = {}) {
+  const {
+    strict = true,
+    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
+    name
+  } = options;
+  const Context = React2.createContext(void 0);
+  Context.displayName = name;
+  function useContext2() {
+    const context = React2.useContext(Context);
+    if (!context && strict) {
+      const error = new Error(errorMessage);
+      error.name = "ContextError";
+      Error.captureStackTrace?.(error, useContext2);
+      throw error;
+    }
+    return context;
+  }
+  return [
+    Context.Provider,
+    useContext2,
+    Context
+  ];
+}
+
+// src/hooks/use-controlled-state.ts
+import React3 from "react";
+function useControlledState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = React3.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const setValue = (newValue) => {
+    if (!isControlled) {
+      setUncontrolledValue(newValue);
+    }
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  return [value, setValue];
+}
 export {
   applyUnstyled,
+  createContext2 as createContext,
   createTVUnstyledSlots,
-  extendVariants
+  extendVariants,
+  mergeRefs,
+  useControlledState,
+  useTVUnstyled
 };

package.json

 {
   "name": "@mijn-ui/react-core",
   "author": "Htet Aung Lin<[e-mail]>",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "homepage": "https://mijn-ui.vercel.app",
@@ -20,12 +20,13 @@ "license": "MIT",
   },
-  "exports": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./theme.css": "./dist/theme.css"
+  },
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "react": "19.0.0",
     "@types/node": "22.9.0",
     "@types/react": "^19.0.0",
-    "tailwind-variants": "^0.3.0",
+    "react": "19.0.0",
     "eslint-config-custom": "0.0.1",
     "tsconfig": "0.0.0",
-    "@mijn-ui/react-theme": "0.2.0",
     "tsup-config": "0.0.0"
@@ -36,4 +37,5 @@ },
     "react-dom": "^19.0",
-    "tailwindcss": ">=3.4.0",
-    "@mijn-ui/react-theme": "^0.2.0"
+    "tailwindcss": "^4.0.0",
+    "tailwind-merge": "^3.0.0",
+    "tailwind-variants": "^3.0.0"
   },
@@ -48,2 +50,5 @@ "publishConfig": {
   ],
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
   "scripts": {
@@ -50,0 +55,0 @@ "clean": "rimraf dist .turbo",

dist/chunk-64KGWHB4.js

-import {
-  applyUnstyled
-} from "./chunk-PYCMJISY.js";
-
-// src/tv-unstyled-slots.ts
-var createTVUnstyledSlots = (styleSlots, unstyled) => {
-  return Object.keys(styleSlots).reduce(
-    (acc, key) => {
-      acc[key] = (...args) => {
-        const lastArg = args[args.length - 1];
-        const className = lastArg?.className;
-        const argsWithoutClassName = className ? args.slice(0, -1) : args;
-        return applyUnstyled(
-          unstyled,
-          styleSlots[key]?.(...argsWithoutClassName) || "",
-          className
-        );
-      };
-      return acc;
-    },
-    {}
-  );
-};
-
-export {
-  createTVUnstyledSlots
-};

dist/chunk-CUPWOGUU.js

-// src/map-props-variants.ts
-var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
-  if (!variantKeys) {
-    return [props, {}];
-  }
-  const picked = variantKeys.reduce((acc, key) => {
-    if (key in props) {
-      return { ...acc, [key]: props[key] };
-    } else {
-      return acc;
-    }
-  }, {});
-  if (removeVariantProps) {
-    const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
-    return [omitted, picked];
-  } else {
-    return [props, picked];
-  }
-};
-
-export {
-  mapPropsVariants
-};

dist/chunk-PYCMJISY.js

-// src/unstyled.ts
-import { cn } from "@mijn-ui/react-theme";
-var applyUnstyled = (unstyled, defaultClasses, userClasses) => {
-  return unstyled ? userClasses : cn(defaultClasses, userClasses);
-};
-
-export {
-  applyUnstyled
-};

dist/chunk-S5PZZMIE.js

-import {
-  mapPropsVariants
-} from "./chunk-CUPWOGUU.js";
-
-// src/extend-variants.js
-import * as React from "react";
-import { clsx, tv } from "@mijn-ui/react-theme";
-function getSlots(variants) {
-  return variants ? Object.values(variants).flatMap(Object.values).reduce((acc, slot) => {
-    if (typeof slot === "object" && slot !== null && !(slot instanceof String)) {
-      Object.keys(slot).forEach((key) => {
-        if (!acc.hasOwnProperty(key)) {
-          acc[key] = "";
-        }
-      });
-    }
-    return acc;
-  }, {}) : {};
-}
-function getClassNamesWithProps({
-  props = {},
-  variants,
-  slots,
-  defaultVariants,
-  compoundVariants,
-  hasSlots,
-  opts
-}) {
-  const keys = [];
-  if (defaultVariants && typeof defaultVariants === "object") {
-    for (const key in defaultVariants) {
-      const value = defaultVariants[key];
-      const propValue = props?.[key];
-      if (propValue && propValue !== value) {
-        keys.push(key);
-      }
-    }
-  }
-  const customTv = tv(
-    {
-      variants,
-      defaultVariants: defaultVariants && typeof defaultVariants === "object" ? (
-        // Do not apply default variants when the props variant is different
-        Object.keys(defaultVariants).filter((k) => !keys.includes(k)).reduce((o, k) => {
-          o[k] = defaultVariants[k];
-          return o;
-        }, [])
-      ) : defaultVariants,
-      compoundVariants,
-      ...hasSlots && { slots }
-    },
-    {
-      twMerge: opts.twMerge ?? true,
-      twMergeConfig: opts.twMergeConfig ?? {}
-    }
-  );
-  const [baseProps, variantProps] = mapPropsVariants(
-    props,
-    customTv.variantKeys,
-    false
-  );
-  const newProps = { ...defaultVariants, ...baseProps };
-  let classNames = {};
-  const result = customTv(variantProps);
-  if (!hasSlots) {
-    newProps.className = clsx(result, props.className);
-  } else {
-    Object.entries(result).forEach(([key, value]) => {
-      const slotResult = value();
-      if (typeof slotResult === "string") {
-        classNames[key] = slotResult;
-      }
-    });
-    Object.entries(props.classNames ?? {}).forEach(([key, value]) => {
-      classNames[key] = clsx(classNames[key], value);
-    });
-  }
-  if (Object.keys(classNames).length !== 0) {
-    newProps.classNames = classNames;
-  }
-  return newProps;
-}
-function extendVariants(BaseComponent, styles = {}, opts = {}) {
-  const { variants, defaultVariants, compoundVariants } = styles || {};
-  const slots = getSlots(variants);
-  const hasSlots = typeof slots === "object" && Object.keys(slots).length !== 0;
-  const Component = (originalProps) => {
-    const newProps = getClassNamesWithProps({
-      slots,
-      variants,
-      compoundVariants,
-      props: originalProps,
-      defaultVariants,
-      hasSlots,
-      opts
-    });
-    return React.createElement(BaseComponent, {
-      ...originalProps,
-      ...newProps
-    });
-  };
-  if (BaseComponent.getCollectionNode) {
-    Component.getCollectionNode = (itemProps) => {
-      const newProps = getClassNamesWithProps({
-        slots,
-        variants,
-        compoundVariants,
-        props: itemProps,
-        defaultVariants,
-        hasSlots,
-        opts
-      });
-      return BaseComponent.getCollectionNode({ ...itemProps, ...newProps });
-    };
-  }
-  return Component;
-}
-
-export {
-  extendVariants
-};

dist/extend-variants.d.d.ts

-import { JSXElementConstructor, ReactElement } from 'react';
-import { OmitUndefined, ClassValue, StringToBoolean, ClassProp } from 'tailwind-variants';
-
-/* Adapted From NextUI ❤️ */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-
-type SlotsClassValue<S> = {
-  [K in keyof S]?: ClassValue
-}
-
-type Variants<S> = {
-  [K: string]: {
-    [P: string]: S extends undefined ? ClassValue : SlotsClassValue<S>
-  }
-}
-
-type ComponentProps<C> = C extends JSXElementConstructor<infer P> ? P : never
-
-type ComponentSlots<CP> = CP extends { classNames?: infer S } ? S : undefined
-
-type ValidateSubtype<T, U> = OmitUndefined<T> extends U ? "true" : "false"
-
-type GetSuggestedValues<S> = S extends undefined
-  ? ClassValue
-  : SlotsClassValue<S>
-
-type SuggestedVariants<CP, S> = {
-  [K in keyof CP]?: ValidateSubtype<CP[K], string> extends "true"
-    ? { [K2 in CP[K]]?: GetSuggestedValues<S> }
-    : ValidateSubtype<CP[K], boolean> extends "true"
-      ? {
-          true?: GetSuggestedValues<S>
-          false?: GetSuggestedValues<S>
-        }
-      : never
-}
-
-type ComposeVariants<CP, S> = SuggestedVariants<CP, S> | Variants<S>
-
-type VariantValue<V, SV> = {
-  [K in keyof V | keyof SV]?:
-    | (K extends keyof V ? StringToBoolean<keyof V[K]> : never)
-    | (K extends keyof V ? StringToBoolean<keyof V[K]>[] : never)
-    | (K extends keyof SV
-        ? ValidateSubtype<SV[K], object> extends "true"
-          ? keyof OmitUndefined<SV[K]>
-          : never
-        : never)
-}
-
-type DefaultVariants<V, SV> = VariantValue<V, SV>
-
-type CompoundVariants<V, SV> = Array<
-  VariantValue<V, SV> & ClassProp<ClassValue>
->
-
-type Options = {
-  /**
-   * Whether to merge the class names with `tailwind-merge` library.
-   * It avoids to have duplicate tailwind classes. (Recommended)
-   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
-   * @default true
-   */
-  twMerge?: boolean
-  /**
-   * The config object for `tailwind-merge` library.
-   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
-   */
-  twMergeConfig?: any
-}
-
-type ExtendVariantProps = {
-  variants?: Record<string, Record<string, string>>
-  defaultVariants?: Record<string, string>
-  compoundVariants?: Array<
-    Record<string, boolean | string | Record<string, string>>
-  >
-}
-
-type ExtendVariantWithSlotsProps = {
-  variants?: Record<string, Record<string, string | Record<string, string>>>
-  defaultVariants?: Record<string, string>
-  compoundVariants?: Array<
-    Record<string, boolean | string | Record<string, string>>
-  >
-}
-
-type ExtendVariants = {
-  <
-    C extends JSXElementConstructor<any>,
-    CP extends ComponentProps<C>,
-    S extends ComponentSlots<CP>,
-    V extends ComposeVariants<CP, S>,
-    SV extends SuggestedVariants<CP, S>,
-    DV extends DefaultVariants<V, SV>,
-    CV extends CompoundVariants<V, SV>,
-  >(
-    BaseComponent: C,
-    styles: {
-      variants?: V
-      defaultVariants?: DV
-      compoundVariants?: CV
-      slots?: S
-    },
-    opts?: Options,
-  ): (props: {
-    [key in keyof CP | keyof V]?:
-      | (key extends keyof CP ? CP[key] : never)
-      | (key extends keyof V ? StringToBoolean<keyof V[key]> : never)
-  }) => ReactElement
-}
-
-// main function
-declare const extendVariants: ExtendVariants
-
-export { type ExtendVariantProps, type ExtendVariantWithSlotsProps, type ExtendVariants, extendVariants };

dist/extend-variants.d.js

dist/extend-variants.d.ts

-import { JSXElementConstructor, ReactElement } from 'react';
-import { OmitUndefined, ClassValue, StringToBoolean, ClassProp } from 'tailwind-variants';
-
-/* Adapted From NextUI ❤️ */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-
-type SlotsClassValue<S> = {
-  [K in keyof S]?: ClassValue
-}
-
-type Variants<S> = {
-  [K: string]: {
-    [P: string]: S extends undefined ? ClassValue : SlotsClassValue<S>
-  }
-}
-
-type ComponentProps<C> = C extends JSXElementConstructor<infer P> ? P : never
-
-type ComponentSlots<CP> = CP extends { classNames?: infer S } ? S : undefined
-
-type ValidateSubtype<T, U> = OmitUndefined<T> extends U ? "true" : "false"
-
-type GetSuggestedValues<S> = S extends undefined
-  ? ClassValue
-  : SlotsClassValue<S>
-
-type SuggestedVariants<CP, S> = {
-  [K in keyof CP]?: ValidateSubtype<CP[K], string> extends "true"
-    ? { [K2 in CP[K]]?: GetSuggestedValues<S> }
-    : ValidateSubtype<CP[K], boolean> extends "true"
-      ? {
-          true?: GetSuggestedValues<S>
-          false?: GetSuggestedValues<S>
-        }
-      : never
-}
-
-type ComposeVariants<CP, S> = SuggestedVariants<CP, S> | Variants<S>
-
-type VariantValue<V, SV> = {
-  [K in keyof V | keyof SV]?:
-    | (K extends keyof V ? StringToBoolean<keyof V[K]> : never)
-    | (K extends keyof V ? StringToBoolean<keyof V[K]>[] : never)
-    | (K extends keyof SV
-        ? ValidateSubtype<SV[K], object> extends "true"
-          ? keyof OmitUndefined<SV[K]>
-          : never
-        : never)
-}
-
-type DefaultVariants<V, SV> = VariantValue<V, SV>
-
-type CompoundVariants<V, SV> = Array<
-  VariantValue<V, SV> & ClassProp<ClassValue>
->
-
-type Options = {
-  /**
-   * Whether to merge the class names with `tailwind-merge` library.
-   * It avoids to have duplicate tailwind classes. (Recommended)
-   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/README.md
-   * @default true
-   */
-  twMerge?: boolean
-  /**
-   * The config object for `tailwind-merge` library.
-   * @see https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md
-   */
-  twMergeConfig?: any
-}
-
-type ExtendVariantProps = {
-  variants?: Record<string, Record<string, string>>
-  defaultVariants?: Record<string, string>
-  compoundVariants?: Array<
-    Record<string, boolean | string | Record<string, string>>
-  >
-}
-
-type ExtendVariantWithSlotsProps = {
-  variants?: Record<string, Record<string, string | Record<string, string>>>
-  defaultVariants?: Record<string, string>
-  compoundVariants?: Array<
-    Record<string, boolean | string | Record<string, string>>
-  >
-}
-
-type ExtendVariants = {
-  <
-    C extends JSXElementConstructor<any>,
-    CP extends ComponentProps<C>,
-    S extends ComponentSlots<CP>,
-    V extends ComposeVariants<CP, S>,
-    SV extends SuggestedVariants<CP, S>,
-    DV extends DefaultVariants<V, SV>,
-    CV extends CompoundVariants<V, SV>,
-  >(
-    BaseComponent: C,
-    styles: {
-      variants?: V
-      defaultVariants?: DV
-      compoundVariants?: CV
-      slots?: S
-    },
-    opts?: Options,
-  ): (props: {
-    [key in keyof CP | keyof V]?:
-      | (key extends keyof CP ? CP[key] : never)
-      | (key extends keyof V ? StringToBoolean<keyof V[key]> : never)
-  }) => ReactElement
-}
-
-// main function
-declare const extendVariants: ExtendVariants
-
-export { type ExtendVariantProps, type ExtendVariantWithSlotsProps, type ExtendVariants, extendVariants };

dist/extend-variants.js

-import {
-  extendVariants
-} from "./chunk-S5PZZMIE.js";
-import "./chunk-CUPWOGUU.js";
-export {
-  extendVariants
-};

dist/map-props-variants.d.ts

-declare const mapPropsVariants: <T extends Record<string, any>, K extends keyof T>(props: T, variantKeys?: K[], removeVariantProps?: boolean) => readonly [Omit<T, K> | T, Pick<T, K> | {}];
-
-export { mapPropsVariants };

dist/map-props-variants.js

-import {
-  mapPropsVariants
-} from "./chunk-CUPWOGUU.js";
-export {
-  mapPropsVariants
-};

dist/tv-unstyled-slots.d.ts

-/**
- * Creates unstyled slot functions that dynamically adapt to the arguments
- * of the original slot functions provided in `styleSlots`.
- *
- * @template T - A record where values are functions with arbitrary arguments.
- * @param styleSlots - A record of functions defining styles for each slot.
- * @param unstyled - A flag to determine whether to apply unstyled mode.
- *
- * @returns A record of functions with the same arguments as the originals,
- *          plus `className`, applying unstyled logic.
- */
-declare const createTVUnstyledSlots: <T extends Record<string, (...args: any[]) => string | undefined>>(styleSlots: T, unstyled?: boolean) => { [K in keyof T]: (...args: Parameters<T[K]>) => string | undefined; };
-
-export { createTVUnstyledSlots };

dist/tv-unstyled-slots.js

-import {
-  createTVUnstyledSlots
-} from "./chunk-64KGWHB4.js";
-import "./chunk-PYCMJISY.js";
-export {
-  createTVUnstyledSlots
-};

dist/unstyled.d.ts

-/**
- * Conditionally applies CSS class names based on the `unstyled` flag.
- *
- * When the `unstyled` flag is `true`, only the `userClasses` are applied, effectively bypassing the default styles.
- * If `unstyled` is `false`, both the `defaultClasses` and `userClasses` are combined to apply the full set of styles.
- *
- * @param unstyled - A boolean flag that indicates whether to bypass the default styling. If `true`, only user-defined classes are used.
- * @param defaultClasses - The default Tailwind CSS classes that are applied when `unstyled` is `false`.
- * @param userClasses - Optional additional classes provided by the user. These classes are always added to `defaultClasses`, unless `unstyled` is `true`.
- *
- * @returns A string containing the combined class names or only the `userClasses` if `unstyled` is `true`. If no `userClasses` are provided, the default classes are returned.
- */
-declare const applyUnstyled: (unstyled: boolean | undefined, defaultClasses: string, userClasses?: string) => string | undefined;
-
-export { applyUnstyled };

dist/unstyled.js

-import {
-  applyUnstyled
-} from "./chunk-PYCMJISY.js";
-export {
-  applyUnstyled
-};

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24060

44.43%

Dev dependency count

6

-25%

Lines of code

672

51.01%

Worsened metrics

Dependency count

6

50%

Number of package files

5

-72.22%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  clsx@^2.1.1

• + Added

  tailwind-merge@3.6.0
  (transitive)

• + Added

  tailwind-variants@3.2.2
  (transitive)

• - Removed

  @mijn-ui/react-theme@0.2.1
  (transitive)

• - Removed

  @mijn-ui/react-utilities@0.0.9
  (transitive)

• - Removed

  deepmerge@4.3.1
  (transitive)

• - Removed

  flat@6.0.1
  (transitive)

• - Removed

  tailwind-merge@2.5.42.6.1
  (transitive)

• - Removed

  tailwind-variants@0.3.1
  (transitive)

• - Removed

  tailwindcss-animate@1.0.7
  (transitive)