ekm-ui 0.0.2

package/.turbo/turbo-build.log

@@ -0,0 +1,22 @@
+$ tsup
+CLI Building entry: src/Button.tsx, src/index.tsx
+CLI Using tsconfig: tsconfig.json
+CLI tsup v6.7.0
+CLI Using tsup config: /home/jack/repos/dev/frontend/packages/ekm-ui/tsup.config.ts
+CLI Target: es6
+CLI Cleaning output folder
+ESM Build start
+DTS Build start
+DTS ⚡️ Build success in 1766ms
+DTS dist/index.d.ts  38.00 B
+DTS dist/Button.d.ts 763.00 B
+"createElement" and "forwardRef" are imported from external module "react" but never used in "dist/chunk-57QDDOX4.mjs".
+ESM dist/index.css              11.36 KB
+ESM dist/index.css.map          21.06 KB
+ESM dist/Button.mjs             119.00 B
+ESM dist/chunk-57QDDOX4.mjs     2.82 KB
+ESM dist/index.mjs              118.00 B
+ESM dist/Button.mjs.map         51.00 B
+ESM dist/chunk-57QDDOX4.mjs.map 11.88 KB
+ESM dist/index.mjs.map          51.00 B
+ESM ⚡️ Build success in 2726ms

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# ekm-ui
+
+## 0.0.2
+
+### Patch Changes
+
+- ac9056e: Set up changesets

package/dist/Button.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Utility type to infer the first argument of a variantProps function.
+ */
+type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
+
+declare const buttonProps: <P extends {} & {
+    color?: "default" | "primary" | "warning" | "danger" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    disabled?: boolean | undefined;
+    type?: "outline" | "solid" | "link" | undefined;
+} & {
+    className?: string | undefined;
+}>(props: P) => {
+    className: string;
+} & Omit<P, "color" | "size" | "disabled" | "type">;
+type Props = JSX.IntrinsicElements["button"] & VariantPropsOf<typeof buttonProps>;
+declare function Button(props: Props): JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+export { Button };

package/dist/Button.mjs

@@ -0,0 +1,3 @@
+export { a as Button } from './chunk-57QDDOX4.mjs';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=Button.mjs.map

package/dist/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/chunk-57QDDOX4.mjs

@@ -0,0 +1,8 @@
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var x=Object.defineProperty;var m=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var c=(t,n,e)=>n in t?x(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e,d=(t,n)=>{for(var e in n||(n={}))v.call(n,e)&&c(t,e,n[e]);if(m)for(var e of m(n))C.call(n,e)&&c(t,e,n[e]);return t};function b(t){let{base:n,variants:e,compoundVariants:s,defaultVariants:i}=t,u=p=>{let r=e==null?void 0:e[p];return r&&("false"in r||"true"in r)};return p=>{var f;let r=[n],V=a=>{var o,l;return (l=(o=p[a])!=null?o:i==null?void 0:i[a])!=null?l:u(a)?!1:void 0};for(let a in e){let o=V(a);o!==void 0&&r.push((f=e[a])==null?void 0:f[o]);}for(let{variants:a,className:o}of s!=null?s:[]){let l=y=>V(y)===a[y];Object.keys(a).every(l)&&r.push(o);}return r.filter(Boolean).join(" ")}}function g(t){let n=b(t);return e=>{let s={};for(let i in e)t.variants&&!(i in t.variants)&&(s[i]=e[i]);return s.className=[e.className,n(e)].filter(Boolean).join(" "),s}}var O=g({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:!1,type:"solid"}});function P(t){return jsx("button",d({},O(t)))}P.displayName="Button";
+
+export { P as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-57QDDOX4.mjs.map

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

@@ -0,0 +1 @@
+{"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/dist/index.css

@@ -0,0 +1,2 @@
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.\!container{width:100%!important}.container{width:100%}@media (min-width: 640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width: 768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width: 1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width: 1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width: 1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.\!block{display:block!important}.block{display:block}.inline{display:inline}.flex{display:flex}.\!table{display:table!important}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-9{height:2.25rem}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.resize{resize:both}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity))}.bg-orange-600{--tw-bg-opacity: 1;background-color:rgb(234 88 12 / var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-inset{--tw-ring-inset: inset}.ring-green-600{--tw-ring-opacity: 1;--tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity))}.ring-indigo-600{--tw-ring-opacity: 1;--tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity))}.ring-orange-600{--tw-ring-opacity: 1;--tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity))}.ring-red-600{--tw-ring-opacity: 1;--tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity))}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:bg-green-50:hover{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity))}.hover\:bg-green-500:hover{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}.hover\:bg-indigo-50:hover{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity))}.hover\:bg-indigo-500:hover{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.hover\:bg-orange-50:hover{--tw-bg-opacity: 1;background-color:rgb(255 247 237 / var(--tw-bg-opacity))}.hover\:bg-orange-500:hover{--tw-bg-opacity: 1;background-color:rgb(249 115 22 / var(--tw-bg-opacity))}.hover\:bg-red-50:hover{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))}.hover\:bg-red-500:hover{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-green-600:focus-visible{outline-color:#16a34a}.focus-visible\:outline-indigo-600:focus-visible{outline-color:#4f46e5}.focus-visible\:outline-orange-600:focus-visible{outline-color:#ea580c}.focus-visible\:outline-red-600:focus-visible{outline-color:#dc2626}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/*\n! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.\\!container {\n  width: 100% !important;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .\\!container {\n    max-width: 640px !important;\n  }\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .\\!container {\n    max-width: 768px !important;\n  }\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .\\!container {\n    max-width: 1024px !important;\n  }\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .\\!container {\n    max-width: 1280px !important;\n  }\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .\\!container {\n    max-width: 1536px !important;\n  }\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.visible {\n  visibility: visible;\n}\n.invisible {\n  visibility: hidden;\n}\n.collapse {\n  visibility: collapse;\n}\n.static {\n  position: static;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.\\!block {\n  display: block !important;\n}\n.block {\n  display: block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.\\!table {\n  display: table !important;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-9 {\n  height: 2.25rem;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.grow {\n  flex-grow: 1;\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-not-allowed {\n  cursor: not-allowed;\n}\n.resize {\n  resize: both;\n}\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.border {\n  border-width: 1px;\n}\n.bg-green-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.bg-green-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(22 163 74 / var(--tw-bg-opacity));\n}\n.bg-indigo-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(79 70 229 / var(--tw-bg-opacity));\n}\n.bg-orange-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(234 88 12 / var(--tw-bg-opacity));\n}\n.bg-red-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-3\\.5 {\n  padding-left: 0.875rem;\n  padding-right: 0.875rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.py-2\\.5 {\n  padding-top: 0.625rem;\n  padding-bottom: 0.625rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.lowercase {\n  text-transform: lowercase;\n}\n.italic {\n  font-style: italic;\n}\n.ordinal {\n  --tw-ordinal: ordinal;\n  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n.text-indigo-600 {\n  --tw-text-opacity: 1;\n  color: rgb(79 70 229 / var(--tw-text-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.underline {\n  text-decoration-line: underline;\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.ring-1 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-inset {\n  --tw-ring-inset: inset;\n}\n.ring-green-600 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));\n}\n.ring-indigo-600 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));\n}\n.ring-orange-600 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity));\n}\n.ring-red-600 {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));\n}\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.grayscale {\n  --tw-grayscale: grayscale(100%);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.invert {\n  --tw-invert: invert(100%);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.\\!filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.hover\\:bg-green-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(240 253 244 / var(--tw-bg-opacity));\n}\n.hover\\:bg-green-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.hover\\:bg-indigo-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(238 242 255 / var(--tw-bg-opacity));\n}\n.hover\\:bg-indigo-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(99 102 241 / var(--tw-bg-opacity));\n}\n.hover\\:bg-orange-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 247 237 / var(--tw-bg-opacity));\n}\n.hover\\:bg-orange-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 115 22 / var(--tw-bg-opacity));\n}\n.hover\\:bg-red-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 242 242 / var(--tw-bg-opacity));\n}\n.hover\\:bg-red-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n.focus-visible\\:outline:focus-visible {\n  outline-style: solid;\n}\n.focus-visible\\:outline-2:focus-visible {\n  outline-width: 2px;\n}\n.focus-visible\\:outline-offset-2:focus-visible {\n  outline-offset: 2px;\n}\n.focus-visible\\:outline-green-600:focus-visible {\n  outline-color: #16a34a;\n}\n.focus-visible\\:outline-indigo-600:focus-visible {\n  outline-color: #4f46e5;\n}\n.focus-visible\\:outline-orange-600:focus-visible {\n  outline-color: #ea580c;\n}\n.focus-visible\\:outline-red-600:focus-visible {\n  outline-color: #dc2626;\n}\n"],"mappings":"AAOA,iBAGE,sBACA,eACA,mBACA,qBAGF,eAEE,iBAYF,KACE,gBACA,8BACA,gBACA,cACG,WACH,uMACA,6BACA,+BAQF,KA9CA,SAgDE,oBASF,GACE,SACA,cACA,qBAOF,oBACE,yCACQ,iCAOV,kBAME,kBACA,oBAOF,EACE,cACA,wBAOF,SAEE,mBAQF,kBAIE,oGACA,cAOF,MACE,cAOF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,cAGF,IACE,UASF,MACE,cACA,qBACA,yBASF,sCAKE,oBACA,eACA,oBACA,oBACA,cA5KF,mBAqLA,cAEE,oBAQF,gDAIE,0BACA,6BACA,sBAOF,gBACE,aAOF,iBACE,gBAOF,SACE,wBAOF,wDAEE,YAQF,cACE,6BACA,oBAOF,4BACE,wBAQF,6BACE,0BACA,aAOF,QACE,kBAOF,mDAjRA,SAiSA,SAjSA,mBAsSA,OAtSA,UA0SA,WAGE,gBA7SF,mBAsTA,SACE,gBAQF,mDACE,UACA,cAGF,yCAEE,UACA,cAOF,qBAEE,eAMF,UACE,eASF,+CAQE,cACA,sBAOF,UAEE,eACA,YAIF,SACE,aAGF,iBACE,yBACA,yBACA,oBACA,oBACA,eACA,eACA,eACA,gBACA,gBACA,aACA,aACA,kBACA,uCACA,8BACA,6BACA,4BACA,eACA,oBACA,sBACA,uBACA,wBACA,kBACA,4BACA,6BACA,sCACA,mCACA,4BACA,uBACA,+BACA,YACA,kBACA,gBACA,iBACA,kBACA,cACA,gBACA,aACA,mBACA,qBACA,2BACA,yBACA,0BACA,2BACA,uBACA,wBACA,yBACA,sBAGF,WACE,yBACA,yBACA,oBACA,oBACA,eACA,eACA,eACA,gBACA,gBACA,aACA,aACA,kBACA,uCACA,8BACA,6BACA,4BACA,eACA,oBACA,sBACA,uBACA,wBACA,kBACA,4BACA,6BACA,sCACA,mCACA,4BACA,uBACA,+BACA,YACA,kBACA,gBACA,iBACA,kBACA,cACA,gBACA,aACA,mBACA,qBACA,2BACA,yBACA,0BACA,2BACA,uBACA,wBACA,yBACA,sBAEF,aACE,qBAEF,WACE,WAEF,0BAEE,aACE,0BAGF,WACE,iBAGJ,0BAEE,aACE,0BAGF,WACE,iBAGJ,2BAEE,aACE,2BAGF,WACE,kBAGJ,2BAEE,aACE,2BAGF,WACE,kBAGJ,2BAEE,aACE,2BAGF,WACE,kBAGJ,SACE,mBAEF,WACE,kBAEF,UACE,oBAEF,QACE,gBAEF,OACE,eAEF,UACE,kBAEF,UACE,kBAEF,QACE,gBAEF,SACE,wBAEF,OACE,cAEF,QACE,eAEF,MACE,aAEF,SACE,wBAEF,OACE,cAEF,MACE,aAEF,UACE,iBAEF,QACE,aAEF,KACE,eAEF,QACE,cAEF,MACE,YAEF,WACE,6LAEF,oBACE,mBAEF,QACE,YAEF,UACE,gBACA,uBACA,mBAEF,SAhmBA,qBAmmBA,cAnmBA,qBAsmBA,QACE,iBAEF,cACE,mBACA,uDAEF,cACE,mBACA,uDAEF,eACE,mBACA,uDAEF,eACE,mBACA,uDAEF,YACE,mBACA,uDAEF,UACE,mBACA,yDAEF,MACE,mBACA,oBAEF,SACE,qBACA,sBAEF,MACE,oBACA,qBAEF,SACE,qBACA,sBAEF,MACE,kBACA,mBAEF,MACE,mBACA,sBAEF,SACE,oBACA,uBAEF,MACE,kBACA,qBAEF,SACE,oBACA,uBAEF,SACE,mBACA,oBAEF,SACE,kBACA,oBAEF,SACE,iBACA,iBAEF,eACE,gBAEF,WACE,yBAEF,WACE,yBAEF,QACE,kBAEF,SACE,sBACA,4IAEF,iBACE,qBACA,8CAEF,YACE,qBACA,gDAEF,WACE,+BAEF,YACE,WAEF,QACE,yEACA,+FACA,qGAEF,WACE,0CACA,wDACA,qGAEF,SACE,oBAEF,QACE,4GACA,0GACA,0FAEF,YACE,uBAEF,gBACE,qBACA,yDAEF,iBACE,qBACA,yDAEF,iBACE,qBACA,yDAEF,cACE,qBACA,yDAEF,MACE,qBACA,iLAEF,WACE,gCACA,iLAEF,QACE,0BACA,iLAEF,UACE,2LAEF,QACE,iLAEF,YACE,sJACA,8IACA,sKACA,mDACA,yBAEF,0BACE,mBACA,yDAEF,2BACE,mBACA,uDAEF,2BACE,mBACA,yDAEF,4BACE,mBACA,wDAEF,2BACE,mBACA,yDAEF,4BACE,mBACA,wDAEF,wBACE,mBACA,yDAEF,yBACE,mBACA,uDAEF,wBACE,+BAEF,sCACE,oBAEF,wCACE,kBAEF,+CACE,mBAEF,gDACE,sBAEF,iDACE,sBAEF,iDACE,sBAEF,8CACE","names":[]}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './Button.js';

package/dist/index.mjs

@@ -0,0 +1,3 @@
+export { a as Button } from './chunk-57QDDOX4.mjs';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "ekm-ui",
+  "version": "0.0.2",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist",
+    "./styles.css": "./dist/index.css"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint \"**/*.ts*\""
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
+    "postcss": "^8.4.20",
+    "react": "^17.0.2",
+    "tailwind-config": "*",
+    "tsconfig": "*",
+    "tsup": "^6.1.3",
+    "typescript": "^4.5.2"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/Button.tsx

@@ -0,0 +1,131 @@
+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";

package/src/index.tsx

@@ -0,0 +1,4 @@
+import * as React from "react";
+export { Button } from "./Button";
+
+import "./styles.css";

package/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/variants.ts

@@ -0,0 +1,234 @@
+import type { ComponentProps, ElementType, ReactElement, Ref } from "react";
+import { createElement, forwardRef } from "react";
+
+/**
+ * Definition of the available variants and their options.
+ * @example
+ * {
+ *   color: {
+ *     white: "bg-white"
+ *     green: "bg-green-500",
+ *   },
+ *   size: {
+ *     small: "text-xs",
+ *     large: "text-lg"
+ *   }
+ * }
+ */
+export type Variants = Record<string, Record<string, string>>;
+
+/**
+ * Configuration including defaults and compound variants.
+ */
+export interface VariantsConfig<V extends Variants> {
+  base?: string;
+  variants: V;
+  compoundVariants?: CompoundVariant<V>[];
+  defaultVariants?: Partial<OptionsOf<V>>;
+}
+
+/**
+ * Rules for class names that are applied for certain variant combinations.
+ */
+export interface CompoundVariant<V extends Variants> {
+  variants: Partial<OptionsOf<V>>;
+  className: string;
+}
+
+/**
+ * Only the boolean variants, i.e. ones that have "true" or "false" as options.
+ */
+type BooleanVariants<V extends Variants> = {
+  [K in keyof V as V[K] extends { true: any } | { false: any }
+    ? K
+    : never]: V[K];
+};
+
+/**
+ * Only the variants for which a default options is set.
+ */
+type DefaultVariants<
+  C extends VariantsConfig<V>,
+  V extends Variants = C["variants"]
+> = {
+  [K in keyof V as K extends keyof C["defaultVariants"]
+    ? K
+    : never]: C["variants"][K];
+};
+
+/**
+ * Names of all optional variants, i.e. booleans or ones with default options.
+ */
+type OptionalVariantNames<
+  C extends VariantsConfig<V>,
+  V extends Variants = C["variants"]
+> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;
+
+/**
+ * Possible options for all the optional variants.
+ *
+ * @example
+ * {
+ *   color?: "white" | "green",
+ *   rounded?: boolean | undefined
+ * }
+ */
+type OptionalOptions<
+  C extends VariantsConfig<V>,
+  V extends Variants = C["variants"]
+> = {
+  [K in keyof V as K extends OptionalVariantNames<C>
+    ? K
+    : never]?: OptionsOf<V>[K];
+};
+
+/**
+ * Possible options for all required variants.
+ *
+ * @example {
+ *   size: "small" | "large"
+ * }
+ */
+type RequiredOptions<
+  C extends VariantsConfig<V>,
+  V extends Variants = C["variants"]
+> = {
+  [K in keyof V as K extends OptionalVariantNames<C>
+    ? never
+    : K]: OptionsOf<V>[K];
+};
+
+/**
+ * Utility type to extract the possible options.
+ * Converts "true" | "false" options into booleans.
+ *
+ * @example
+ * OptionsOf<{
+ *   size: { small: "text-xs"; large: "text-lg" };
+ *   rounded: { true: "rounded-full" }
+ * }>
+ * ==>
+ * {
+ *   size: "text-xs" | "text-lg";
+ *   rounded: boolean;
+ * }
+ */
+type OptionsOf<V extends Variants> = {
+  [K in keyof V]: keyof V[K] extends "true" | "false" ? boolean : keyof V[K];
+};
+
+/**
+ * Extracts the possible options.
+ */
+export type VariantOptions<
+  C extends VariantsConfig<V>,
+  V extends Variants = C["variants"]
+> = RequiredOptions<C> & OptionalOptions<C>;
+
+/**
+ * Without this conversion step, defaultVariants and compoundVariants will
+ * allow extra keys, i.e. non-existent variants.
+ * See https://github.com/sindresorhus/type-fest/blob/main/source/simplify.d.ts
+ */
+export type Simplify<T> = {
+  [K in keyof T]: T[K];
+};
+
+export function variants<
+  C extends VariantsConfig<V>,
+  V extends Variants = C["variants"]
+>(config: Simplify<C>) {
+  const { base, variants, compoundVariants, defaultVariants } = config;
+
+  const isBooleanVariant = (name: keyof V) => {
+    const v = variants?.[name];
+    return v && ("false" in v || "true" in v);
+  };
+
+  return (props: VariantOptions<C>) => {
+    const res = [base];
+
+    const getSelected = (name: keyof V) =>
+      (props as any)[name] ??
+      defaultVariants?.[name] ??
+      (isBooleanVariant(name) ? false : undefined);
+
+    for (let name in variants) {
+      const selected = getSelected(name);
+      if (selected !== undefined) res.push(variants[name]?.[selected]);
+    }
+
+    for (let { variants, className } of compoundVariants ?? []) {
+      const isSelected = (name: string) => getSelected(name) === variants[name];
+      if (Object.keys(variants).every(isSelected)) {
+        res.push(className);
+      }
+    }
+    return res.filter(Boolean).join(" ");
+  };
+}
+
+/**
+ * Utility type to infer the first argument of a variantProps function.
+ */
+export type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
+
+/**
+ * Type for the variantProps() argument – consists of the VariantOptions and an optional className for chaining.
+ */
+type VariantProps<
+  C extends VariantsConfig<V>,
+  V extends Variants = C["variants"]
+> = VariantOptions<C> & { className?: string };
+
+export function variantProps<
+  C extends VariantsConfig<V>,
+  V extends Variants = C["variants"]
+>(config: Simplify<C>) {
+  const variantClassName = variants<C>(config);
+  return <P extends VariantProps<C>>(props: P) => {
+    const result: any = {};
+
+    // Pass-through all unrelated props
+    for (let prop in props) {
+      if (config.variants && !(prop in config.variants)) {
+        result[prop] = props[prop];
+      }
+    }
+
+    // Add the optionally passed className prop for chaining
+    result.className = [props.className, variantClassName(props)]
+      .filter(Boolean)
+      .join(" ");
+
+    return result as { className: string } & Omit<P, keyof C["variants"]>;
+  };
+}
+
+type AsProps<T extends ElementType = ElementType> = {
+  as?: T;
+};
+
+type PolymorphicComponentProps<T extends ElementType> = AsProps<T> &
+  Omit<ComponentProps<T>, "as">;
+
+export function styled<
+  T extends ElementType,
+  C extends VariantsConfig<V>,
+  V extends Variants = C["variants"]
+>(type: T, config: string | Simplify<C>) {
+  const styledProps =
+    typeof config === "string"
+      ? variantProps({ base: config, variants: {} })
+      : variantProps(config);
+
+  const Component: <As extends ElementType = T>(
+    props: PolymorphicComponentProps<As> & VariantOptions<C>
+    // eslint-disable-next-line react/display-name
+  ) => ReactElement | null = forwardRef(
+    ({ as, ...props }: AsProps, ref: Ref<Element>) => {
+      return createElement(as ?? type, { ...styledProps(props), ref });
+    }
+  );
+  return Component;
+}

package/tailwind.config.js

@@ -0,0 +1,6 @@
+const sharedConfig = require("tailwind-config/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  ...sharedConfig,
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  treeshake: true,
+  splitting: true,
+  entry: ["src/**/*.tsx"],
+  format: ["esm"],
+  dts: true,
+  minify: true,
+  clean: true,
+  external: ["react", "react-dom"],
+  sourcemap: true,
+  ...options,
+}));