ekm-ui 0.0.4 → 0.0.5

package/dist/chunk-57QDDOX4.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/variants.ts","../src/Button.tsx"],"names":["createElement","forwardRef","variants","config","base","compoundVariants","defaultVariants","isBooleanVariant","name","v","props","_a","res","getSelected","_b","selected","className","isSelected","variantProps","variantClassName","result","prop","jsx","buttonProps","Button","__spreadValues"],"mappings":"yVACA,OAAS,iBAAAA,EAAe,cAAAC,MAAkB,QAuInC,SAASC,EAGdC,EAAqB,CACrB,GAAM,CAAE,KAAAC,EAAM,SAAAF,EAAU,iBAAAG,EAAkB,gBAAAC,CAAgB,EAAIH,EAExDI,EAAoBC,GAAkB,CAC1C,IAAMC,EAAIP,GAAA,YAAAA,EAAWM,GACrB,OAAOC,IAAM,UAAWA,GAAK,SAAUA,EACzC,EAEA,OAAQC,GAA6B,CAnJvC,IAAAC,EAoJI,IAAMC,EAAM,CAACR,CAAI,EAEXS,EAAeL,GAAe,CAtJxC,IAAAG,EAAAG,EAuJO,OAAAA,GAAAH,EAAAD,EAAcF,CAAI,IAAlB,KAAAG,EACDL,GAAA,YAAAA,EAAkBE,KADjB,KAAAM,EAEAP,EAAiBC,CAAI,EAAI,GAAQ,QAEpC,QAASA,KAAQN,EAAU,CACzB,IAAMa,EAAWF,EAAYL,CAAI,EAC7BO,IAAa,QAAWH,EAAI,MAAKD,EAAAT,EAASM,CAAI,IAAb,YAAAG,EAAiBI,EAAS,EAGjE,OAAS,CAAE,SAAAb,EAAU,UAAAc,CAAU,IAAKX,GAAA,KAAAA,EAAoB,CAAC,EAAG,CAC1D,IAAMY,EAAcT,GAAiBK,EAAYL,CAAI,IAAMN,EAASM,CAAI,EACpE,OAAO,KAAKN,CAAQ,EAAE,MAAMe,CAAU,GACxCL,EAAI,KAAKI,CAAS,EAGtB,OAAOJ,EAAI,OAAO,OAAO,EAAE,KAAK,GAAG,CACrC,CACF,CAeO,SAASM,EAGdf,EAAqB,CACrB,IAAMgB,EAAmBjB,EAAYC,CAAM,EAC3C,OAAmCO,GAAa,CAC9C,IAAMU,EAAc,CAAC,EAGrB,QAASC,KAAQX,EACXP,EAAO,UAAY,EAAEkB,KAAQlB,EAAO,YACtCiB,EAAOC,CAAI,EAAIX,EAAMW,CAAI,GAK7B,OAAAD,EAAO,UAAY,CAACV,EAAM,UAAWS,EAAiBT,CAAK,CAAC,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEJU,CACT,CACF,CC/ES,cAAAE,MAAA,oBA3HT,IAAMC,EAAcL,EAAa,CAC/B,KAAM,0GACN,SAAU,CACR,MAAO,CACL,QAAS,mCACT,QAAS,kCACT,QAAS,mCACT,OAAQ,+BACV,EACA,KAAM,CACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN,EACA,SAAU,CACR,KAAM,+BACR,EACA,KAAM,CACJ,QAAS,uCACT,MAAO,uBACP,KAAM,0BACR,CACF,EACA,iBAAkB,CAChB,CACE,SAAU,CACR,MAAO,UACP,KAAM,OACR,EACA,UAAW,mCACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,OACR,EACA,UAAW,iCACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,OACR,EACA,UAAW,mCACb,EACA,CACE,SAAU,CACR,MAAO,SACP,KAAM,OACR,EACA,UAAW,6BACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,SACR,EACA,UAAW,oDACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,SACR,EACA,UAAW,kCACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,SACR,EACA,UAAW,oCACb,EACA,CACE,SAAU,CACR,MAAO,SACP,KAAM,SACR,EACA,UAAW,8BACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,MACR,EACA,UAAW,iBACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,MACR,EACA,UAAW,gBACb,EACA,CACE,SAAU,CACR,MAAO,UACP,KAAM,MACR,EACA,UAAW,iBACb,EACA,CACE,SAAU,CACR,MAAO,SACP,KAAM,MACR,EACA,UAAW,cACb,CACF,EACA,gBAAiB,CACf,MAAO,UACP,KAAM,KACN,SAAU,GACV,KAAM,OACR,CACF,CAAC,EAKM,SAASM,EAAOd,EAAc,CACnC,OAAOY,EAAC,SAAAG,EAAA,GAAWF,EAAYb,CAAK,EAAG,CACzC,CAGAc,EAAO,YAAc","sourcesContent":["import type { ComponentProps, ElementType, ReactElement, Ref } from \"react\";\nimport { createElement, forwardRef } from \"react\";\n\n/**\n * Definition of the available variants and their options.\n * @example\n * {\n *   color: {\n *     white: \"bg-white\"\n *     green: \"bg-green-500\",\n *   },\n *   size: {\n *     small: \"text-xs\",\n *     large: \"text-lg\"\n *   }\n * }\n */\nexport type Variants = Record<string, Record<string, string>>;\n\n/**\n * Configuration including defaults and compound variants.\n */\nexport interface VariantsConfig<V extends Variants> {\n  base?: string;\n  variants: V;\n  compoundVariants?: CompoundVariant<V>[];\n  defaultVariants?: Partial<OptionsOf<V>>;\n}\n\n/**\n * Rules for class names that are applied for certain variant combinations.\n */\nexport interface CompoundVariant<V extends Variants> {\n  variants: Partial<OptionsOf<V>>;\n  className: string;\n}\n\n/**\n * Only the boolean variants, i.e. ones that have \"true\" or \"false\" as options.\n */\ntype BooleanVariants<V extends Variants> = {\n  [K in keyof V as V[K] extends { true: any } | { false: any }\n    ? K\n    : never]: V[K];\n};\n\n/**\n * Only the variants for which a default options is set.\n */\ntype DefaultVariants<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = {\n  [K in keyof V as K extends keyof C[\"defaultVariants\"]\n    ? K\n    : never]: C[\"variants\"][K];\n};\n\n/**\n * Names of all optional variants, i.e. booleans or ones with default options.\n */\ntype OptionalVariantNames<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;\n\n/**\n * Possible options for all the optional variants.\n *\n * @example\n * {\n *   color?: \"white\" | \"green\",\n *   rounded?: boolean | undefined\n * }\n */\ntype OptionalOptions<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = {\n  [K in keyof V as K extends OptionalVariantNames<C>\n    ? K\n    : never]?: OptionsOf<V>[K];\n};\n\n/**\n * Possible options for all required variants.\n *\n * @example {\n *   size: \"small\" | \"large\"\n * }\n */\ntype RequiredOptions<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = {\n  [K in keyof V as K extends OptionalVariantNames<C>\n    ? never\n    : K]: OptionsOf<V>[K];\n};\n\n/**\n * Utility type to extract the possible options.\n * Converts \"true\" | \"false\" options into booleans.\n *\n * @example\n * OptionsOf<{\n *   size: { small: \"text-xs\"; large: \"text-lg\" };\n *   rounded: { true: \"rounded-full\" }\n * }>\n * ==>\n * {\n *   size: \"text-xs\" | \"text-lg\";\n *   rounded: boolean;\n * }\n */\ntype OptionsOf<V extends Variants> = {\n  [K in keyof V]: keyof V[K] extends \"true\" | \"false\" ? boolean : keyof V[K];\n};\n\n/**\n * Extracts the possible options.\n */\nexport type VariantOptions<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = RequiredOptions<C> & OptionalOptions<C>;\n\n/**\n * Without this conversion step, defaultVariants and compoundVariants will\n * allow extra keys, i.e. non-existent variants.\n * See https://github.com/sindresorhus/type-fest/blob/main/source/simplify.d.ts\n */\nexport type Simplify<T> = {\n  [K in keyof T]: T[K];\n};\n\nexport function variants<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n>(config: Simplify<C>) {\n  const { base, variants, compoundVariants, defaultVariants } = config;\n\n  const isBooleanVariant = (name: keyof V) => {\n    const v = variants?.[name];\n    return v && (\"false\" in v || \"true\" in v);\n  };\n\n  return (props: VariantOptions<C>) => {\n    const res = [base];\n\n    const getSelected = (name: keyof V) =>\n      (props as any)[name] ??\n      defaultVariants?.[name] ??\n      (isBooleanVariant(name) ? false : undefined);\n\n    for (let name in variants) {\n      const selected = getSelected(name);\n      if (selected !== undefined) res.push(variants[name]?.[selected]);\n    }\n\n    for (let { variants, className } of compoundVariants ?? []) {\n      const isSelected = (name: string) => getSelected(name) === variants[name];\n      if (Object.keys(variants).every(isSelected)) {\n        res.push(className);\n      }\n    }\n    return res.filter(Boolean).join(\" \");\n  };\n}\n\n/**\n * Utility type to infer the first argument of a variantProps function.\n */\nexport type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;\n\n/**\n * Type for the variantProps() argument – consists of the VariantOptions and an optional className for chaining.\n */\ntype VariantProps<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n> = VariantOptions<C> & { className?: string };\n\nexport function variantProps<\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n>(config: Simplify<C>) {\n  const variantClassName = variants<C>(config);\n  return <P extends VariantProps<C>>(props: P) => {\n    const result: any = {};\n\n    // Pass-through all unrelated props\n    for (let prop in props) {\n      if (config.variants && !(prop in config.variants)) {\n        result[prop] = props[prop];\n      }\n    }\n\n    // Add the optionally passed className prop for chaining\n    result.className = [props.className, variantClassName(props)]\n      .filter(Boolean)\n      .join(\" \");\n\n    return result as { className: string } & Omit<P, keyof C[\"variants\"]>;\n  };\n}\n\ntype AsProps<T extends ElementType = ElementType> = {\n  as?: T;\n};\n\ntype PolymorphicComponentProps<T extends ElementType> = AsProps<T> &\n  Omit<ComponentProps<T>, \"as\">;\n\nexport function styled<\n  T extends ElementType,\n  C extends VariantsConfig<V>,\n  V extends Variants = C[\"variants\"]\n>(type: T, config: string | Simplify<C>) {\n  const styledProps =\n    typeof config === \"string\"\n      ? variantProps({ base: config, variants: {} })\n      : variantProps(config);\n\n  const Component: <As extends ElementType = T>(\n    props: PolymorphicComponentProps<As> & VariantOptions<C>\n    // eslint-disable-next-line react/display-name\n  ) => ReactElement | null = forwardRef(\n    ({ as, ...props }: AsProps, ref: Ref<Element>) => {\n      return createElement(as ?? type, { ...styledProps(props), ref });\n    }\n  );\n  return Component;\n}\n","import * as React from \"react\";\nimport { VariantPropsOf, variantProps } from \"./variants\";\n\nconst buttonProps = variantProps({\n  base: \"rounded-full font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2\",\n  variants: {\n    color: {\n      default: \"focus-visible:outline-indigo-600\",\n      primary: \"focus-visible:outline-green-600\",\n      warning: \"focus-visible:outline-orange-600\",\n      danger: \"focus-visible:outline-red-600\",\n    },\n    size: {\n      xs: \"px-2.5 py-1 text-xs\",\n      sm: \"px-2.5 py-1 text-sm\",\n      md: \"px-3 py-1.5 text-sm\",\n      lg: \"px-3.5 py-2 text-sm\",\n      xl: \"px-4 py-2.5 text-sm\",\n    },\n    disabled: {\n      true: \"cursor-not-allowed opacity-50\",\n    },\n    type: {\n      outline: \"ring-1 ring-inset bg-white shadow-sm\",\n      solid: \"text-white shadow-sm\",\n      link: \"hover:underline bg-white\",\n    },\n  },\n  compoundVariants: [\n    {\n      variants: {\n        color: \"default\",\n        type: \"solid\",\n      },\n      className: \"bg-indigo-600 hover:bg-indigo-500\",\n    },\n    {\n      variants: {\n        color: \"primary\",\n        type: \"solid\",\n      },\n      className: \"bg-green-600 hover:bg-green-500\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        type: \"solid\",\n      },\n      className: \"bg-orange-600 hover:bg-orange-500\",\n    },\n    {\n      variants: {\n        color: \"danger\",\n        type: \"solid\",\n      },\n      className: \"bg-red-600 hover:bg-red-500\",\n    },\n    {\n      variants: {\n        color: \"default\",\n        type: \"outline\",\n      },\n      className: \"text-indigo-600 ring-indigo-600 hover:bg-indigo-50\",\n    },\n    {\n      variants: {\n        color: \"primary\",\n        type: \"outline\",\n      },\n      className: \"ring-green-600 hover:bg-green-50\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        type: \"outline\",\n      },\n      className: \"ring-orange-600 hover:bg-orange-50\",\n    },\n    {\n      variants: {\n        color: \"danger\",\n        type: \"outline\",\n      },\n      className: \"ring-red-600 hover:bg-red-50\",\n    },\n    {\n      variants: {\n        color: \"default\",\n        type: \"link\",\n      },\n      className: \"text-indigo-600\",\n    },\n    {\n      variants: {\n        color: \"primary\",\n        type: \"link\",\n      },\n      className: \"ring-green-600\",\n    },\n    {\n      variants: {\n        color: \"warning\",\n        type: \"link\",\n      },\n      className: \"ring-orange-600\",\n    },\n    {\n      variants: {\n        color: \"danger\",\n        type: \"link\",\n      },\n      className: \"ring-red-600\",\n    },\n  ],\n  defaultVariants: {\n    color: \"default\",\n    size: \"md\",\n    disabled: false,\n    type: \"solid\",\n  },\n});\n\ntype Props = JSX.IntrinsicElements[\"button\"] &\n  VariantPropsOf<typeof buttonProps>;\n\nexport function Button(props: Props) {\n  return <button {...buttonProps(props)} />;\n}\n\n// Set display name so that correct component name shows up in DevTools / Storybook.\nButton.displayName = \"Button\";\n"]}

package/src/Button.tsx

@@ -1,131 +0,0 @@
-import * as React from "react";
-import { VariantPropsOf, variantProps } from "./variants";
-
-const buttonProps = variantProps({
-  base: "rounded-full font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
-  variants: {
-    color: {
-      default: "focus-visible:outline-indigo-600",
-      primary: "focus-visible:outline-green-600",
-      warning: "focus-visible:outline-orange-600",
-      danger: "focus-visible:outline-red-600",
-    },
-    size: {
-      xs: "px-2.5 py-1 text-xs",
-      sm: "px-2.5 py-1 text-sm",
-      md: "px-3 py-1.5 text-sm",
-      lg: "px-3.5 py-2 text-sm",
-      xl: "px-4 py-2.5 text-sm",
-    },
-    disabled: {
-      true: "cursor-not-allowed opacity-50",
-    },
-    type: {
-      outline: "ring-1 ring-inset bg-white shadow-sm",
-      solid: "text-white shadow-sm",
-      link: "hover:underline bg-white",
-    },
-  },
-  compoundVariants: [
-    {
-      variants: {
-        color: "default",
-        type: "solid",
-      },
-      className: "bg-indigo-600 hover:bg-indigo-500",
-    },
-    {
-      variants: {
-        color: "primary",
-        type: "solid",
-      },
-      className: "bg-green-600 hover:bg-green-500",
-    },
-    {
-      variants: {
-        color: "warning",
-        type: "solid",
-      },
-      className: "bg-orange-600 hover:bg-orange-500",
-    },
-    {
-      variants: {
-        color: "danger",
-        type: "solid",
-      },
-      className: "bg-red-600 hover:bg-red-500",
-    },
-    {
-      variants: {
-        color: "default",
-        type: "outline",
-      },
-      className: "text-indigo-600 ring-indigo-600 hover:bg-indigo-50",
-    },
-    {
-      variants: {
-        color: "primary",
-        type: "outline",
-      },
-      className: "ring-green-600 hover:bg-green-50",
-    },
-    {
-      variants: {
-        color: "warning",
-        type: "outline",
-      },
-      className: "ring-orange-600 hover:bg-orange-50",
-    },
-    {
-      variants: {
-        color: "danger",
-        type: "outline",
-      },
-      className: "ring-red-600 hover:bg-red-50",
-    },
-    {
-      variants: {
-        color: "default",
-        type: "link",
-      },
-      className: "text-indigo-600",
-    },
-    {
-      variants: {
-        color: "primary",
-        type: "link",
-      },
-      className: "ring-green-600",
-    },
-    {
-      variants: {
-        color: "warning",
-        type: "link",
-      },
-      className: "ring-orange-600",
-    },
-    {
-      variants: {
-        color: "danger",
-        type: "link",
-      },
-      className: "ring-red-600",
-    },
-  ],
-  defaultVariants: {
-    color: "default",
-    size: "md",
-    disabled: false,
-    type: "solid",
-  },
-});
-
-type Props = JSX.IntrinsicElements["button"] &
-  VariantPropsOf<typeof buttonProps>;
-
-export function Button(props: Props) {
-  return <button {...buttonProps(props)} />;
-}
-
-// Set display name so that correct component name shows up in DevTools / Storybook.
-Button.displayName = "Button";