@cryptlex/web-components 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +11 -27
  2. package/dist/components/ui/badge.es.js +13 -12
  3. package/dist/components/ui/badge.es.js.map +1 -1
  4. package/dist/components/ui/button.es.js +1 -1
  5. package/dist/components/ui/button.es.js.map +1 -1
  6. package/dist/components/ui/card.es.js +26 -26
  7. package/dist/components/ui/card.es.js.map +1 -1
  8. package/dist/index.es.d.ts +1 -1
  9. package/lib/index.css +55 -11
  10. package/lib/tokens.css +161 -139
  11. package/package.json +5 -4
  12. package/tailwind.preset.ts +67 -68
package/README.md CHANGED
@@ -1,39 +1,23 @@
1
1
  # @cryptlex/web-components
2
2
 
3
- A set of React components based on shadcn/ui for the Cryptlex brand. These are to be used across all applications. Run `pnpm build` to build the component library.
3
+ A React component library for Cryptlex.
4
4
 
5
- ## Storybook
6
- This project uses Storybook to test and showcase components. Stories are located in the `stories` folder.
7
-
8
- `pnpm storybook` for running Storybook locally
9
- `pnpn build:storybook` to build a static version of Storybook
10
-
11
-
12
-
13
- tailwind.config.js
5
+ # Usage
6
+ In your tailwind.config.ts, add the following code:
14
7
  ```ts
15
- import tailwindPreset from '@cryptlex/web-components/tailwind-preset';
8
+ import CtlxPreset from '@cryptlex/web-components/tailwind-preset';
16
9
 
17
- /** @type {import('tailwindcss').Config} */
18
10
  export default {
19
- presets:[tailwindPreset],
11
+ ...
12
+ presets:[CtlxPreset],
20
13
  content: [
21
- "./index.html",
22
- "./src/**/*.{js,ts,jsx,tsx}",
23
- './node_modules/@cryptlex/web-components/**/*.{js,ts,jsx,tsx}',
14
+ ...
15
+ "./node_modules/@cryptlex/web-components/**/*.{js,ts,jsx,tsx}",
24
16
  ],
25
- theme: {
26
- extend: {},
27
- },
28
- plugins: [],
29
- }
30
-
31
-
17
+ }
32
18
  ```
33
- index.css
34
19
 
20
+ In your global index.css, import the following CSS:
35
21
  ```css
36
- /* Import the index.css from the @cryptlex/web-components library */
37
22
  @import url('@cryptlex/web-components/index.css');
38
-
39
- ```
23
+ ```
package/dist/components/ui/badge.es.js CHANGED
@@ -1,14 +1,15 @@
1
- import { jsx as o } from "react/jsx-runtime";
2
- import { cva as n } from "class-variance-authority";
3
- import { cn as a } from "../../utils/index.es.js";
4
- const s = n(
5
- "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
1
+ import { jsx as n } from "react/jsx-runtime";
2
+ import { cva as o } from "class-variance-authority";
3
+ import { cn as s } from "../../utils/index.es.js";
4
+ const a = o(
5
+ "inline-flex items-center select-none rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
6
6
  {
7
7
  variants: {
8
8
  variant: {
9
- default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
10
- secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
11
- destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
9
+ default: "border-transparent bg-primary text-primary-foreground",
10
+ secondary: "border-transparent bg-secondary text-secondary-foreground",
11
+ destructive: "border-transparent bg-destructive text-destructive-foreground",
12
+ success: "border-transparent bg-success text-success-foreground",
12
13
  outline: "text-foreground"
13
14
  }
14
15
  },
@@ -17,11 +18,11 @@ const s = n(
17
18
  }
18
19
  }
19
20
  );
20
- function c({ className: r, variant: e, ...t }) {
21
- return /* @__PURE__ */ o("div", { className: a(s({ variant: e }), r), ...t });
21
+ function u({ className: r, variant: e, ...t }) {
22
+ return /* @__PURE__ */ n("div", { className: s(a({ variant: e }), r), ...t });
22
23
  }
23
24
  export {
24
- c as Badge,
25
- s as badgeVariants
25
+ u as Badge,
26
+ a as badgeVariants
26
27
  };
27
28
  //# sourceMappingURL=badge.es.js.map
package/dist/components/ui/badge.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"badge.es.js","sources":["../../../lib/components/ui/badge.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n )\n}\n\nexport { Badge, badgeVariants }\n"],"names":["badgeVariants","cva","Badge","className","variant","props","jsx","cn"],"mappings":";;;AAKA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAMA,SAASC,EAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,KAAqB;AAC3D,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAGP,EAAc,EAAE,SAAAI,EAAS,CAAA,GAAGD,CAAS,GAAI,GAAGE,EAAO,CAAA;AAE1E;"}
1
+ {"version":3,"file":"badge.es.js","sources":["../../../lib/components/ui/badge.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center select-none rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground\",\n success:\n \"border-transparent bg-success text-success-foreground\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return (\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\n )\n}\n\nexport { Badge, badgeVariants }\n"],"names":["badgeVariants","cva","Badge","className","variant","props","jsx","cn"],"mappings":";;;AAKA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAMA,SAASC,EAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,KAAqB;AAC3D,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAGP,EAAc,EAAE,SAAAI,EAAS,CAAA,GAAGD,CAAS,GAAI,GAAGE,EAAO,CAAA;AAE1E;"}
package/dist/components/ui/button.es.js CHANGED
@@ -9,7 +9,7 @@ const x = p(
9
9
  {
10
10
  variants: {
11
11
  variant: {
12
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
12
+ default: "bg-primary text-primary-foreground hover:bg-primary/80",
13
13
  destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14
14
  outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
15
15
  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
package/dist/components/ui/button.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.es.js","sources":["../../../lib/components/ui/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\nimport { Loader } from \"./loader\";\nimport { LucideIcon } from \"lucide-react\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n loading?: boolean;\n icon?: LucideIcon;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n loading,\n disabled,\n asChild = false,\n icon,\n children,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\";\n const Icon = icon;\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n disabled={loading || disabled}\n {...props}\n >\n {/* Shows loading when `loading:true` irrespective of icon present or not; otherwise shows button icon if present */}\n {loading ? <Loader /> : Icon ? <Icon className=\"h-4 w-4\" /> : null}\n {/* Margin left only when both icon and children (button text) are present */}\n {children ? (\n <div className={icon && children ? \"ml-2\" : \"\"}>{children}</div>\n ) : null}\n </Comp>\n );\n }\n);\n\nButton.displayName = \"Button\"; // Set display name for better debugging\n\nexport { Button, buttonVariants };\n"],"names":["buttonVariants","cva","Button","React","className","variant","size","loading","disabled","asChild","icon","children","props","ref","Comp","Slot","Icon","jsxs","cn","jsx","Loader"],"mappings":";;;;;;AAQA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAUMC,IAASC,EAAM;AAAA,EACnB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACG,UAAAC,IAAOL,IAAUM,IAAO,UACxBC,IAAON;AAGX,WAAA,gBAAAO;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,WAAWI,EAAGlB,EAAe,EAAE,SAAAK,GAAS,MAAAC,GAAM,WAAAF,EAAA,CAAW,CAAC;AAAA,QAC1D,KAAAS;AAAA,QACA,UAAUN,KAAWC;AAAA,QACpB,GAAGI;AAAA,QAGH,UAAA;AAAA,UAAUL,IAAA,gBAAAY,EAACC,KAAO,IAAKJ,sBAAQA,GAAK,EAAA,WAAU,WAAU,IAAK;AAAA,UAE7DL,sBACE,OAAI,EAAA,WAAWD,KAAQC,IAAW,SAAS,IAAK,UAAAA,EAAA,CAAS,IACxD;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAEAT,EAAO,cAAc;"}
1
+ {"version":3,"file":"button.es.js","sources":["../../../lib/components/ui/button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/utils\"\nimport { Loader } from \"./loader\";\nimport { LucideIcon } from \"lucide-react\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n loading?: boolean;\n icon?: LucideIcon;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n loading,\n disabled,\n asChild = false,\n icon,\n children,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\";\n const Icon = icon;\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n disabled={loading || disabled}\n {...props}\n >\n {/* Shows loading when `loading:true` irrespective of icon present or not; otherwise shows button icon if present */}\n {loading ? <Loader /> : Icon ? <Icon className=\"h-4 w-4\" /> : null}\n {/* Margin left only when both icon and children (button text) are present */}\n {children ? (\n <div className={icon && children ? \"ml-2\" : \"\"}>{children}</div>\n ) : null}\n </Comp>\n );\n }\n);\n\nButton.displayName = \"Button\"; // Set display name for better debugging\n\nexport { Button, buttonVariants };\n"],"names":["buttonVariants","cva","Button","React","className","variant","size","loading","disabled","asChild","icon","children","props","ref","Comp","Slot","Icon","jsxs","cn","jsx","Loader"],"mappings":";;;;;;AAQA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAUMC,IAASC,EAAM;AAAA,EACnB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACG,UAAAC,IAAOL,IAAUM,IAAO,UACxBC,IAAON;AAGX,WAAA,gBAAAO;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,WAAWI,EAAGlB,EAAe,EAAE,SAAAK,GAAS,MAAAC,GAAM,WAAAF,EAAA,CAAW,CAAC;AAAA,QAC1D,KAAAS;AAAA,QACA,UAAUN,KAAWC;AAAA,QACpB,GAAGI;AAAA,QAGH,UAAA;AAAA,UAAUL,IAAA,gBAAAY,EAACC,KAAO,IAAKJ,sBAAQA,GAAK,EAAA,WAAU,WAAU,IAAK;AAAA,UAE7DL,sBACE,OAAI,EAAA,WAAWD,KAAQC,IAAW,SAAS,IAAK,UAAAA,EAAA,CAAS,IACxD;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAEAT,EAAO,cAAc;"}
package/dist/components/ui/card.es.js CHANGED
@@ -1,67 +1,67 @@
1
1
  import { jsx as d } from "react/jsx-runtime";
2
- import * as t from "react";
3
- import { cn as o } from "../../utils/index.es.js";
4
- const s = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
2
+ import * as o from "react";
3
+ import { cn as t } from "../../utils/index.es.js";
4
+ const s = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
5
5
  "div",
6
6
  {
7
7
  ref: r,
8
- className: o(
9
- "rounded-lg border bg-card text-card-foreground shadow-sm",
10
- a
8
+ className: t(
9
+ "rounded-lg border border-border bg-card text-card-foreground",
10
+ e
11
11
  ),
12
- ...e
12
+ ...a
13
13
  }
14
14
  ));
15
15
  s.displayName = "Card";
16
- const i = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
16
+ const i = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
17
17
  "div",
18
18
  {
19
19
  ref: r,
20
- className: o("flex flex-col space-y-1.5 p-6", a),
21
- ...e
20
+ className: t("flex flex-col space-y-1.5 p-6", e),
21
+ ...a
22
22
  }
23
23
  ));
24
24
  i.displayName = "CardHeader";
25
- const l = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
25
+ const l = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
26
26
  "h3",
27
27
  {
28
28
  ref: r,
29
- className: o(
29
+ className: t(
30
30
  "text-2xl font-semibold leading-none tracking-tight",
31
- a
31
+ e
32
32
  ),
33
- ...e
33
+ ...a
34
34
  }
35
35
  ));
36
36
  l.displayName = "CardTitle";
37
- const f = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
37
+ const f = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
38
38
  "p",
39
39
  {
40
40
  ref: r,
41
- className: o("text-sm text-muted-foreground", a),
42
- ...e
41
+ className: t("text-sm text-muted-foreground", e),
42
+ ...a
43
43
  }
44
44
  ));
45
45
  f.displayName = "CardDescription";
46
- const m = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d("div", { ref: r, className: o("p-6 pt-0", a), ...e }));
47
- m.displayName = "CardContent";
48
- const n = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
46
+ const n = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d("div", { ref: r, className: t("p-6 pt-0", e), ...a }));
47
+ n.displayName = "CardContent";
48
+ const c = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
49
49
  "div",
50
50
  {
51
51
  ref: r,
52
- className: o(
52
+ className: t(
53
53
  "flex items-center p-6 pt-0 w-full gap-4 justify-end",
54
- a
54
+ e
55
55
  ),
56
- ...e
56
+ ...a
57
57
  }
58
58
  ));
59
- n.displayName = "CardFooter";
59
+ c.displayName = "CardFooter";
60
60
  export {
61
61
  s as Card,
62
- m as CardContent,
62
+ n as CardContent,
63
63
  f as CardDescription,
64
- n as CardFooter,
64
+ c as CardFooter,
65
65
  i as CardHeader,
66
66
  l as CardTitle
67
67
  };
package/dist/components/ui/card.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"card.es.js","sources":["../../../lib/components/ui/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\";\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n className\n )}\n {...props}\n />\n));\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n {...props}\n />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\n \"text-2xl font-semibold leading-none tracking-tight\",\n className\n )}\n {...props}\n />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"flex items-center p-6 pt-0 w-full gap-4 justify-end\",\n className\n )}\n {...props}\n />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardDescription,\n CardContent,\n};\n"],"names":["Card","React","className","props","ref","jsx","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;AAGM,MAAAA,IAAOC,EAAM,WAGjB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAK,cAAc;AAEb,MAAAO,IAAaN,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAW,cAAc;AAEnB,MAAAC,IAAYP,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAU,cAAc;AAElB,MAAAC,IAAkBR,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAgB,cAAc;AAExB,MAAAC,IAAcT,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAS,GAAAC,wBACzB,OAAI,EAAA,KAAAA,GAAU,WAAWE,EAAG,YAAYJ,CAAS,GAAI,GAAGC,GAAO,CACjE;AACDO,EAAY,cAAc;AAEpB,MAAAC,IAAaV,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAW,cAAc;"}
1
+ {"version":3,"file":"card.es.js","sources":["../../../lib/components/ui/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/utils\";\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"rounded-lg border border-border bg-card text-card-foreground\",\n className\n )}\n {...props}\n />\n));\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n {...props}\n />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n className={cn(\n \"text-2xl font-semibold leading-none tracking-tight\",\n className\n )}\n {...props}\n />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <p\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"flex items-center p-6 pt-0 w-full gap-4 justify-end\",\n className\n )}\n {...props}\n />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardDescription,\n CardContent,\n};\n"],"names":["Card","React","className","props","ref","jsx","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;AAGM,MAAAA,IAAOC,EAAM,WAGjB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAK,cAAc;AAEb,MAAAO,IAAaN,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAW,cAAc;AAEnB,MAAAC,IAAYP,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAU,cAAc;AAElB,MAAAC,IAAkBR,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAgB,cAAc;AAExB,MAAAC,IAAcT,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAS,GAAAC,wBACzB,OAAI,EAAA,KAAAA,GAAU,WAAWE,EAAG,YAAYJ,CAAS,GAAI,GAAGC,GAAO,CACjE;AACDO,EAAY,cAAc;AAEpB,MAAAC,IAAaV,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAW,cAAc;"}
package/dist/index.es.d.ts CHANGED
@@ -43,7 +43,7 @@ export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLDivElemen
43
43
  }
44
44
 
45
45
  export declare const badgeVariants: (props?: ({
46
- variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
46
+ variant?: "default" | "secondary" | "destructive" | "success" | "outline" | null | undefined;
47
47
  } & ClassProp) | undefined) => string;
48
48
 
49
49
  export declare const Breadcrumb: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
package/lib/index.css CHANGED
@@ -3,22 +3,66 @@
3
3
  @tailwind components;
4
4
  @tailwind utilities;
5
5
 
6
+ :root {
7
+ /* shadcn tokens */
8
+ --background: var(--neutral-1);
9
+ --foreground: var(--neutral-10);
10
+
11
+ --card: var(--background);
12
+ --card-foreground: var(--foreground);
13
+ --popover: var(--background);
14
+ --popover-foreground: var(--foreground);
15
+
16
+ --primary: var(--primary-8);
17
+ --primary-foreground: var(--primary-2);
18
+
19
+ --secondary: var(--secondary-8);
20
+ --secondary-foreground: var(--secondary-2);
21
+
22
+ --muted: var(--neutral-7);
23
+ --muted-foreground: var(--neutral-3);
24
+
25
+ --accent: var(--neutral-8);
26
+ --accent-foreground: var(--neutral-2);
27
+
28
+ --destructive: var(--destructive-8);
29
+ --destructive-foreground: var(--destructive-2);
30
+
31
+ --success: var(--success-8);
32
+ --succcess-foreground: var(--success-2);
33
+
34
+ --border: var(--muted);
35
+ --input: var(--muted);
36
+ --ring: var(--muted-foreground);
37
+
38
+ --chart-1: var(--primary-5);
39
+ --chart-2: var(--primary-4);
40
+ --chart-3: var(--secondary-5);
41
+ --chart-4: var(--secondary-4);
42
+ --chart-5: var(--secondary-2);
43
+
44
+ --radius: 0rem;
45
+
46
+ --sidebar-background: var(--background);
47
+ --sidebar-foreground: var(--foreground);
48
+
49
+ --sidebar-primary: 240 5.9% 10%;
50
+ --sidebar-primary-foreground: 0 0% 98%;
51
+
52
+ --sidebar-accent: 240 4.8% 95.9%;
53
+ --sidebar-accent-foreground: 240 5.9% 10%;
54
+
55
+ --sidebar-border: 220 13% 91%;
56
+ --sidebar-ring: 217.2 91.2% 59.8%;
57
+ }
58
+
6
59
  @layer base {
7
60
  * {
8
61
  @apply border-border;
9
62
  }
63
+
10
64
  body {
11
65
  @apply bg-background text-foreground;
12
66
  }
13
- /* TODO This is just for testing purposing */
14
- div,
15
- h1,
16
- h2,
17
- h3,
18
- h4,
19
- h5,
20
- h6 {
21
- @apply font-bold
22
- }
23
-
67
+
24
68
  }
package/lib/tokens.css CHANGED
@@ -1,143 +1,165 @@
1
+ /*!
2
+ This CSS is generated by tokens.css, do not modify directly.
3
+ Instead, compile the SCSS file again to create modifications.
4
+ */
1
5
  :root {
2
- --primary-hue: 218;
3
- --primary-1: 99% .02 var(--primary-hue);
4
- --primary-2: 90% .1 var(--primary-hue);
5
- --primary-3: 80% .2 var(--primary-hue);
6
- --primary-4: 72% .25 var(--primary-hue);
7
- --primary-5: 67% .31 var(--primary-hue);
8
- --primary-6: 50% .27 var(--primary-hue);
9
- --primary-7: 35% .25 var(--primary-hue);
10
- --primary-8: 25% .2 var(--primary-hue);
11
- --primary-9: 13% .2 var(--primary-hue);
12
- --primary-10: 5% .1 var(--primary-hue);
13
-
14
- --neutral-s: 0.01;
15
- --neutral-1: 99% var(--neutral-s) var(--primary-hue);
16
- --neutral-2: 82% var(--neutral-s) var(--primary-hue);
17
- --neutral-3: 73% var(--neutral-s) var(--primary-hue);
18
- --neutral-4: 63% var(--neutral-s) var(--primary-hue);
19
- --neutral-5: 54% var(--neutral-s) var(--primary-hue);
20
- --neutral-6: 45% var(--neutral-s) var(--primary-hue);
21
- --neutral-7: 36% var(--neutral-s) var(--primary-hue);
22
- --neutral-8: 27% var(--neutral-s) var(--primary-hue);
23
- --neutral-9: 18% var(--neutral-s) var(--primary-hue);
24
- --neutral-10: 9% var(--neutral-s) var(--primary-hue);
25
- --secondary-hue: 100;
26
- --xsecondary-1: 0.99 0.02 var(--secondary-hue);
27
- --xsecondary-2: 0.9 0.04 var(--secondary-hue);
28
- --xsecondary-3: 0.67 0.13 var(--secondary-hue);
29
- --xsecondary-4: 0.35 0.13 var(--secondary-hue);
30
- --xsecondary-5: 0.13 0.13 var(--secondary-hue);
31
- --secondary-1: var(--xsecondary-1);
32
- --secondary-2: var(--xsecondary-2);
33
- --secondary-3: var(--xsecondary-3);
34
- --secondary-4: var(--xsecondary-4);
35
- --secondary-5: var(--xsecondary-5);
36
-
37
- --accent-hue: 230;
38
- --xaccent-1: 0.99 0.02 var(--accent-hue);
39
- --xaccent-2: 0.9 0.04 var(--accent-hue);
40
- --xaccent-3: 0.67 0.13 var(--accent-hue);
41
- --xaccent-4: 0.35 0.13 var(--accent-hue);
42
- --xaccent-5: 0.13 0.13 var(--accent-hue);
43
- --accent-1: var(--xaccent-1);
44
- --accent-2: var(--xaccent-2);
45
- --accent-3: var(--xaccent-3);
46
- --accent-4: var(--xaccent-4);
47
- --accent-5: var(--xaccent-5);
48
-
49
- --red-hue: 13;
50
- --xred-1: 0.99 0.02 var(--red-hue);
51
- --xred-2: 0.9 0.04 var(--red-hue);
52
- --xred-3: 0.67 0.13 var(--red-hue);
53
- --xred-4: 0.35 0.13 var(--red-hue);
54
- --xred-5: 0.13 0.13 var(--red-hue);
55
- --red-1: var(--xred-1);
56
- --red-2: var(--xred-2);
57
- --red-3: var(--xred-3);
58
- --red-4: var(--xred-4);
59
-
60
- /* shadcn tokens */
61
- --background: var(--neutral-1);
62
- --foreground: var(--neutral-10);
63
-
64
- --card: var(--background);
65
- --card-foreground: var(--foreground);
66
- --popover: var(--background);
67
- --popover-foreground: var(--foreground);
68
-
69
- --primary: var(--primary-8);
70
- --primary-foreground: var(--primary-2);
71
-
72
- --secondary: var(--primary);
73
- --secondary-foreground: var(--primary-foreground);
74
-
75
- --muted: 0 0% 96.1%;
76
- --muted-foreground: 0 0% 45.1%;
77
-
78
- --accent: 0 0% 96.1%;
79
- --accent-foreground: 0 0% 9%;
80
-
81
- --destructive: var(--red-3);
82
- --destructive-foreground: var(--red-1);
83
-
84
- --border: 0 0% 89.8%;
85
- --input: 0 0% 89.8%;
86
- --ring: 0 0% 3.9%;
87
-
88
- --chart-1: 12 76% 61%;
89
- --chart-2: 173 58% 39%;
90
- --chart-3: 197 37% 24%;
91
- --chart-4: 43 74% 66%;
92
- --chart-5: 27 87% 67%;
93
-
94
- --radius: 0rem;
95
-
96
- --sidebar-background: 0 0% 98%;
97
- --sidebar-foreground: 240 5.3% 26.1%;
98
-
99
- --sidebar-primary: 240 5.9% 10%;
100
- --sidebar-primary-foreground: 0 0% 98%;
101
-
102
- --sidebar-accent: 240 4.8% 95.9%;
103
- --sidebar-accent-foreground: 240 5.9% 10%;
104
-
105
- --sidebar-border: 220 13% 91%;
106
- --sidebar-ring: 217.2 91.2% 59.8%
6
+ --primary-hue: 240;
7
+ --xprimary-1: 0.99 0.02 var(--primary-hue);
8
+ --xprimary-2: 0.97 0.03 var(--primary-hue);
9
+ --xprimary-3: 0.9 0.04 var(--primary-hue);
10
+ --xprimary-4: 0.72 0.13 var(--primary-hue);
11
+ --xprimary-5: 0.67 0.13 var(--primary-hue);
12
+ --xprimary-6: 0.5 0.13 var(--primary-hue);
13
+ --xprimary-7: 0.35 0.13 var(--primary-hue);
14
+ --xprimary-8: 0.25 0.13 var(--primary-hue);
15
+ --xprimary-9: 0.13 0.13 var(--primary-hue);
16
+ --xprimary-10: 0.05 0.13 var(--primary-hue);
17
+ --primary-1: var(--xprimary-1);
18
+ --primary-2: var(--xprimary-2);
19
+ --primary-3: var(--xprimary-3);
20
+ --primary-4: var(--xprimary-4);
21
+ --primary-5: var(--xprimary-5);
22
+ --primary-6: var(--xprimary-6);
23
+ --primary-7: var(--xprimary-7);
24
+ --primary-8: var(--xprimary-8);
25
+ --primary-9: var(--xprimary-9);
26
+ --primary-10: var(--xprimary-10);
27
+ --secondary-hue: calc(var(--primary-hue) + 60);
28
+ --xsecondary-1: 0.99 0.02 var(--secondary-hue);
29
+ --xsecondary-2: 0.97 0.03 var(--secondary-hue);
30
+ --xsecondary-3: 0.9 0.04 var(--secondary-hue);
31
+ --xsecondary-4: 0.72 0.13 var(--secondary-hue);
32
+ --xsecondary-5: 0.67 0.13 var(--secondary-hue);
33
+ --xsecondary-6: 0.5 0.13 var(--secondary-hue);
34
+ --xsecondary-7: 0.35 0.13 var(--secondary-hue);
35
+ --xsecondary-8: 0.25 0.13 var(--secondary-hue);
36
+ --xsecondary-9: 0.13 0.13 var(--secondary-hue);
37
+ --xsecondary-10: 0.05 0.13 var(--secondary-hue);
38
+ --secondary-1: var(--xsecondary-1);
39
+ --secondary-2: var(--xsecondary-2);
40
+ --secondary-3: var(--xsecondary-3);
41
+ --secondary-4: var(--xsecondary-4);
42
+ --secondary-5: var(--xsecondary-5);
43
+ --secondary-6: var(--xsecondary-6);
44
+ --secondary-7: var(--xsecondary-7);
45
+ --secondary-8: var(--xsecondary-8);
46
+ --secondary-9: var(--xsecondary-9);
47
+ --secondary-10: var(--xsecondary-10);
48
+ --destructive-hue: 10;
49
+ --xdestructive-1: 0.99 0.02 var(--destructive-hue);
50
+ --xdestructive-2: 0.97 0.03 var(--destructive-hue);
51
+ --xdestructive-3: 0.9 0.04 var(--destructive-hue);
52
+ --xdestructive-4: 0.72 0.13 var(--destructive-hue);
53
+ --xdestructive-5: 0.67 0.13 var(--destructive-hue);
54
+ --xdestructive-6: 0.5 0.13 var(--destructive-hue);
55
+ --xdestructive-7: 0.35 0.13 var(--destructive-hue);
56
+ --xdestructive-8: 0.25 0.13 var(--destructive-hue);
57
+ --xdestructive-9: 0.13 0.13 var(--destructive-hue);
58
+ --xdestructive-10: 0.05 0.13 var(--destructive-hue);
59
+ --destructive-1: var(--xdestructive-1);
60
+ --destructive-2: var(--xdestructive-2);
61
+ --destructive-3: var(--xdestructive-3);
62
+ --destructive-4: var(--xdestructive-4);
63
+ --destructive-5: var(--xdestructive-5);
64
+ --destructive-6: var(--xdestructive-6);
65
+ --destructive-7: var(--xdestructive-7);
66
+ --destructive-8: var(--xdestructive-8);
67
+ --destructive-9: var(--xdestructive-9);
68
+ --destructive-10: var(--xdestructive-10);
69
+ --success-hue: 152;
70
+ --xsuccess-1: 0.99 0.02 var(--success-hue);
71
+ --xsuccess-2: 0.97 0.03 var(--success-hue);
72
+ --xsuccess-3: 0.9 0.04 var(--success-hue);
73
+ --xsuccess-4: 0.72 0.13 var(--success-hue);
74
+ --xsuccess-5: 0.67 0.13 var(--success-hue);
75
+ --xsuccess-6: 0.5 0.13 var(--success-hue);
76
+ --xsuccess-7: 0.35 0.13 var(--success-hue);
77
+ --xsuccess-8: 0.25 0.13 var(--success-hue);
78
+ --xsuccess-9: 0.13 0.13 var(--success-hue);
79
+ --xsuccess-10: 0.05 0.13 var(--success-hue);
80
+ --success-1: var(--xsuccess-1);
81
+ --success-2: var(--xsuccess-2);
82
+ --success-3: var(--xsuccess-3);
83
+ --success-4: var(--xsuccess-4);
84
+ --success-5: var(--xsuccess-5);
85
+ --success-6: var(--xsuccess-6);
86
+ --success-7: var(--xsuccess-7);
87
+ --success-8: var(--xsuccess-8);
88
+ --success-9: var(--xsuccess-9);
89
+ --success-10: var(--xsuccess-10);
90
+ --neutral-hue: var(--primary-hue);
91
+ --neutral-s: 0.01;
92
+ --xneutral-1: 0.99 var(--neutral-s) var(--neutral-hue);
93
+ --xneutral-2: 0.97 var(--neutral-s) var(--neutral-hue);
94
+ --xneutral-3: 0.9 var(--neutral-s) var(--neutral-hue);
95
+ --xneutral-4: 0.72 var(--neutral-s) var(--neutral-hue);
96
+ --xneutral-5: 0.67 var(--neutral-s) var(--neutral-hue);
97
+ --xneutral-6: 0.5 var(--neutral-s) var(--neutral-hue);
98
+ --xneutral-7: 0.4 var(--neutral-s) var(--neutral-hue);
99
+ --xneutral-8: 0.35 var(--neutral-s) var(--neutral-hue);
100
+ --xneutral-9: 0.33 var(--neutral-s) var(--neutral-hue);
101
+ --xneutral-10: 0.25 var(--neutral-s) var(--neutral-hue);
102
+ --neutral-1: var(--xneutral-1);
103
+ --neutral-2: var(--xneutral-2);
104
+ --neutral-3: var(--xneutral-3);
105
+ --neutral-4: var(--xneutral-4);
106
+ --neutral-5: var(--xneutral-5);
107
+ --neutral-6: var(--xneutral-6);
108
+ --neutral-7: var(--xneutral-7);
109
+ --neutral-8: var(--xneutral-8);
110
+ --neutral-9: var(--xneutral-9);
111
+ --neutral-10: var(--xneutral-10);
107
112
  }
108
113
 
109
114
  .dark {
110
- --background: 0 0% 3.9%;
111
- --foreground: 0 0% 98%;
112
- --card: 0 0% 3.9%;
113
- --card-foreground: 0 0% 98%;
114
- --popover: 0 0% 3.9%;
115
- --popover-foreground: 0 0% 98%;
116
- --primary: 0 0% 98%;
117
- --primary-foreground: 0 0% 9%;
118
- --secondary: 0 0% 14.9%;
119
- --secondary-foreground: 0 0% 98%;
120
- --muted: 0 0% 14.9%;
121
- --muted-foreground: 0 0% 63.9%;
122
- --accent: 0 0% 14.9%;
123
- --accent-foreground: 0 0% 98%;
124
- --destructive: 0 62.8% 30.6%;
125
- --destructive-foreground: 0 0% 98%;
126
- --border: 0 0% 14.9%;
127
- --input: 0 0% 14.9%;
128
- --ring: 0 0% 83.1%;
129
- --chart-1: 220 70% 50%;
130
- --chart-2: 160 60% 45%;
131
- --chart-3: 30 80% 55%;
132
- --chart-4: 280 65% 60%;
133
- --chart-5: 340 75% 55%;
134
-
135
- --sidebar-background: 240 5.9% 10%;
136
- --sidebar-foreground: 240 4.8% 95.9%;
137
- --sidebar-primary: 224.3 76.3% 48%;
138
- --sidebar-primary-foreground: 0 0% 100%;
139
- --sidebar-accent: 240 3.7% 15.9%;
140
- --sidebar-accent-foreground: 240 4.8% 95.9%;
141
- --sidebar-border: 240 3.7% 15.9%;
142
- --sidebar-ring: 217.2 91.2% 59.8%
143
- }
115
+ --primary-1: var(--xprimary-10);
116
+ --primary-2: var(--xprimary-9);
117
+ --primary-3: var(--xprimary-8);
118
+ --primary-4: var(--xprimary-7);
119
+ --primary-5: var(--xprimary-6);
120
+ --primary-6: var(--xprimary-5);
121
+ --primary-7: var(--xprimary-4);
122
+ --primary-8: var(--xprimary-3);
123
+ --primary-9: var(--xprimary-2);
124
+ --primary-10: var(--xprimary-1);
125
+ --secondary-1: var(--xsecondary-10);
126
+ --secondary-2: var(--xsecondary-9);
127
+ --secondary-3: var(--xsecondary-8);
128
+ --secondary-4: var(--xsecondary-7);
129
+ --secondary-5: var(--xsecondary-6);
130
+ --secondary-6: var(--xsecondary-5);
131
+ --secondary-7: var(--xsecondary-4);
132
+ --secondary-8: var(--xsecondary-3);
133
+ --secondary-9: var(--xsecondary-2);
134
+ --secondary-10: var(--xsecondary-1);
135
+ --destructive-1: var(--xdestructive-10);
136
+ --destructive-2: var(--xdestructive-9);
137
+ --destructive-3: var(--xdestructive-8);
138
+ --destructive-4: var(--xdestructive-7);
139
+ --destructive-5: var(--xdestructive-6);
140
+ --destructive-6: var(--xdestructive-5);
141
+ --destructive-7: var(--xdestructive-4);
142
+ --destructive-8: var(--xdestructive-3);
143
+ --destructive-9: var(--xdestructive-2);
144
+ --destructive-10: var(--xdestructive-1);
145
+ --success-1: var(--xsuccess-10);
146
+ --success-2: var(--xsuccess-9);
147
+ --success-3: var(--xsuccess-8);
148
+ --success-4: var(--xsuccess-7);
149
+ --success-5: var(--xsuccess-6);
150
+ --success-6: var(--xsuccess-5);
151
+ --success-7: var(--xsuccess-4);
152
+ --success-8: var(--xsuccess-3);
153
+ --success-9: var(--xsuccess-2);
154
+ --success-10: var(--xsuccess-1);
155
+ --neutral-1: var(--xneutral-10);
156
+ --neutral-2: var(--xneutral-9);
157
+ --neutral-3: var(--xneutral-8);
158
+ --neutral-4: var(--xneutral-7);
159
+ --neutral-5: var(--xneutral-6);
160
+ --neutral-6: var(--xneutral-5);
161
+ --neutral-7: var(--xneutral-4);
162
+ --neutral-8: var(--xneutral-3);
163
+ --neutral-9: var(--xneutral-2);
164
+ --neutral-10: var(--xneutral-1);
165
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cryptlex/web-components",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "React component library for Cryptlex web applications",
5
5
  "author": "Cryptlex",
6
6
  "type": "module",
@@ -63,14 +63,13 @@
63
63
  "react": "^18.3.1",
64
64
  "react-day-picker": "8.10.1",
65
65
  "react-dom": "^18.3.1",
66
- "recharts": "^2.13.0",
67
66
  "react-hook-form": "^7.53.1",
67
+ "recharts": "^2.13.0",
68
68
  "tailwind-merge": "^2.5.4",
69
69
  "tailwindcss": "^3.4.14",
70
70
  "tailwindcss-animate": "^1.0.7"
71
71
  },
72
72
  "devDependencies": {
73
- "@chromatic-com/storybook": "^1.9.0",
74
73
  "@eslint/js": "^9.11.1",
75
74
  "@storybook/addon-docs": "^8.3.6",
76
75
  "@storybook/addon-essentials": "^8.3.6",
@@ -92,6 +91,7 @@
92
91
  "eslint-plugin-storybook": "^0.10.1",
93
92
  "globals": "^15.9.0",
94
93
  "postcss": "^8.4.47",
94
+ "sass": "^1.80.6",
95
95
  "storybook": "^8.3.6",
96
96
  "typescript": "^5.5.3",
97
97
  "typescript-eslint": "^8.7.0",
@@ -102,6 +102,7 @@
102
102
  "build": "tsc && vite build",
103
103
  "lint": "eslint .",
104
104
  "storybook": "storybook dev -p 6006",
105
- "build:storybook": "storybook build"
105
+ "build:storybook": "storybook build",
106
+ "build:tokens": "sass --no-source-map ./lib/tokens.scss ./lib/tokens.css"
106
107
  }
107
108
  }
package/tailwind.preset.ts CHANGED
@@ -1,77 +1,76 @@
1
1
  import type { Config } from 'tailwindcss';
2
2
 
3
- // Define your Tailwind preset configuration
4
- const tailwindPreset: Config = {
5
- darkMode: ['class'], // Enable dark mode based on class
6
- content: [
7
- './lib/**/*.{ts,tsx}', // Paths to your library components
8
- './stories/**/*.{tsx,ts}', // Paths to any storybook files
9
- './.storybook/**/*.{tsx,ts}', // Storybook config paths
10
- ],
3
+ export default {
4
+ // Enable dark mode based on class.
5
+ darkMode: ['class'],
6
+ // The preset does not define content, this is done in the host.
7
+ content: [],
11
8
  theme: {
12
- extend: {
13
- borderRadius: {
14
- lg: 'var(--radius)',
15
- md: 'calc(var(--radius) - 2px)',
16
- sm: 'calc(var(--radius) - 4px)',
9
+ borderRadius: {
10
+ lg: 'var(--radius)',
11
+ md: 'calc(var(--radius) - 2px)',
12
+ sm: 'calc(var(--radius) - 4px)',
13
+ },
14
+ colors: {
15
+ background: 'oklch(var(--background) / <alpha-value>)',
16
+ foreground: 'oklch(var(--foreground) / <alpha-value>)',
17
+ card: {
18
+ DEFAULT: 'oklch(var(--card) / <alpha-value>)',
19
+ foreground: 'oklch(var(--card-foreground) / <alpha-value>)',
20
+ },
21
+ popover: {
22
+ DEFAULT: 'oklch(var(--popover) / <alpha-value>)',
23
+ foreground: 'oklch(var(--popover-foreground) / <alpha-value>)',
24
+ },
25
+ primary: {
26
+ DEFAULT: 'oklch(var(--primary) / <alpha-value>)',
27
+ foreground: 'oklch(var(--primary-foreground) / <alpha-value>)',
28
+ },
29
+ secondary: {
30
+ DEFAULT: 'oklch(var(--secondary) / <alpha-value>)',
31
+ foreground: 'oklch(var(--secondary-foreground) / <alpha-value>)',
32
+ },
33
+ muted: {
34
+ DEFAULT: 'oklch(var(--muted) / <alpha-value>)',
35
+ foreground: 'oklch(var(--muted-foreground) / <alpha-value>)',
36
+ },
37
+ accent: {
38
+ DEFAULT: 'oklch(var(--accent) / <alpha-value>)',
39
+ foreground: 'oklch(var(--accent-foreground) / <alpha-value>)',
40
+ },
41
+ destructive: {
42
+ DEFAULT: 'oklch(var(--destructive) / <alpha-value>)',
43
+ foreground: 'oklch(var(--destructive-foreground) / <alpha-value>)',
44
+ },
45
+ success: {
46
+ DEFAULT: 'oklch(var(--success) / <alpha-value>)',
47
+ foreground: 'oklch(var(--success-foreground) / <alpha-value>)',
48
+ },
49
+ border: 'oklch(var(--border) / <alpha-value>)',
50
+ input: 'oklch(var(--input) / <alpha-value>)',
51
+ ring: 'oklch(var(--ring) / <alpha-value>)',
52
+ chart: {
53
+ 1: 'oklch(var(--chart-1) / <alpha-value>)',
54
+ 2: 'oklch(var(--chart-2) / <alpha-value>)',
55
+ 3: 'oklch(var(--chart-3) / <alpha-value>)',
56
+ 4: 'oklch(var(--chart-4) / <alpha-value>)',
57
+ 5: 'oklch(var(--chart-5) / <alpha-value>)',
17
58
  },
18
- colors: {
19
- background: 'oklch(var(--background))',
20
- foreground: 'oklch(var(--foreground))',
21
- card: {
22
- DEFAULT: 'oklch(var(--card))',
23
- foreground: 'oklch(var(--card-foreground))',
24
- },
25
- popover: {
26
- DEFAULT: 'oklch(var(--popover))',
27
- foreground: 'oklch(var(--popover-foreground))',
28
- },
29
- primary: {
30
- DEFAULT: 'oklch(var(--primary))',
31
- foreground: 'oklch(var(--primary-foreground))',
32
- },
33
- secondary: {
34
- DEFAULT: 'oklch(var(--secondary))',
35
- foreground: 'oklch(var(--secondary-foreground))',
36
- },
37
- muted: {
38
- DEFAULT: 'oklch(var(--muted))',
39
- foreground: 'oklch(var(--muted-foreground))',
40
- },
41
- accent: {
42
- DEFAULT: 'oklch(var(--accent))',
43
- foreground: 'oklch(var(--accent-foreground))',
44
- },
45
- destructive: {
46
- DEFAULT: 'oklch(var(--destructive))',
47
- foreground: 'oklch(var(--destructive-foreground))',
48
- },
49
- border: 'oklch(var(--border))',
50
- input: 'oklch(var(--input))',
51
- ring: 'oklch(var(--ring))',
52
- chart: {
53
- 1: 'oklch(var(--chart-1))',
54
- 2: 'oklch(var(--chart-2))',
55
- 3: 'oklch(var(--chart-3))',
56
- 4: 'oklch(var(--chart-4))',
57
- 5: 'oklch(var(--chart-5))',
58
- },
59
- sidebar: {
60
- DEFAULT: 'oklch(var(--sidebar-background))',
61
- foreground: 'oklch(var(--sidebar-foreground))',
62
- primary: 'oklch(var(--sidebar-primary))',
63
- primaryForeground:
64
- 'oklch(var(--sidebar-primary-foreground))',
65
- accent: 'oklch(var(--sidebar-accent))',
66
- accentForeground:
67
- 'oklch(var(--sidebar-accent-foreground))',
68
- border: 'oklch(var(--sidebar-border))',
69
- ring: 'oklch(var(--sidebar-ring))',
70
- },
59
+ sidebar: {
60
+ DEFAULT: 'oklch(var(--sidebar-background) / <alpha-value>)',
61
+ foreground: 'oklch(var(--sidebar-foreground) / <alpha-value>)',
62
+ primary: 'oklch(var(--sidebar-primary) / <alpha-value>)',
63
+ primaryForeground:
64
+ 'oklch(var(--sidebar-primary-foreground) / <alpha-value>)',
65
+ accent: 'oklch(var(--sidebar-accent) / <alpha-value>)',
66
+ accentForeground:
67
+ 'oklch(var(--sidebar-accent-foreground) / <alpha-value>)',
68
+ border: 'oklch(var(--sidebar-border) / <alpha-value>)',
69
+ ring: 'oklch(var(--sidebar-ring) / <alpha-value>)',
71
70
  },
72
71
  },
73
72
  },
74
73
  plugins: [require('tailwindcss-animate')], // Include any plugins you need
75
- };
74
+ } satisfies Config;
76
75
 
77
- export default tailwindPreset;
76
+ // export default tailwindPreset;