commerce-toolkit 0.0.6 → 0.0.8

package/README.md

@@ -85,7 +85,7 @@ Once configured, you can use all the custom Tailwind utilities from Commerce Too
 
 ```tsx
 <div className="bg-primary text-background">
-  <h1 className="text-foreground font-heading">Hello World</h1>
+  <h1 className="font-heading text-foreground">Hello World</h1>
   <p className="text-contrast-400">This uses the design system colors!</p>
 </div>
 ```

package/dist/components/animated-underline/animated-underline.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react';
+export type AnimatedUnderlineProps = ComponentProps<'span'> & {
+    children: string;
+};
+/**
+ * This component supports various CSS variables for theming. Here's a comprehensive list, along
+ * with their default values:
+ *
+ * ```css
+ * :root {
+ *   --animated-underline-hover: hsl(var(--primary));
+ *   --animated-underline-text: hsl(var(--foreground));
+ *   --animated-underline-font-family: var(--font-family-body);
+ * }
+ * ```
+ */
+export declare function AnimatedUnderline({ className, children, ...props }: AnimatedUnderlineProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=animated-underline.d.ts.map

package/dist/components/animated-underline/animated-underline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-underline.d.ts","sourceRoot":"","sources":["../../../src/components/animated-underline/animated-underline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAC5D,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAY1F"}

package/dist/components/animated-underline/index.d.ts

@@ -0,0 +1,2 @@
+export { AnimatedUnderline, type AnimatedUnderlineProps, } from '@/components/animated-underline/animated-underline';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/animated-underline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/animated-underline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,oDAAoD,CAAC"}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react';
+export type BadgeProps = ComponentProps<'span'> & {
+    children: string;
+    shape?: 'pill' | 'rounded';
+    variant?: 'primary' | 'warning' | 'error' | 'success' | 'info';
+};
+/**
+ * This component supports various CSS variables for theming. Here's a comprehensive list, along
+ * with their default values:
+ *
+ * ```css
+ * :root {
+ *   --badge-primary-background: color-mix(in oklab, hsl(var(--primary)), white 75%);
+ *   --badge-success-background: color-mix(in oklab, hsl(var(--success)), white 75%);
+ *   --badge-warning-background: color-mix(in oklab, hsl(var(--warning)), white 75%);
+ *   --badge-error-background: color-mix(in oklab, hsl(var(--error)), white 75%);
+ *   --badge-info-background: color-mix(in oklab, hsl(var(--info)), white 75%);
+ *   --badge-text: hsl(var(--foreground));
+ *   --badge-font-family: var(--font-family-mono);
+ * }
+ * ```
+ */
+export declare function Badge({ children, shape, className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;CAChE,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,KAAiB,EACjB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,UAAU,2CA2BZ"}

package/dist/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge, type BadgeProps } from '@/components/badge/badge';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/styles.css

@@ -13,8 +13,20 @@
   --contrast-300: 0 0% 70%;
   --contrast-400: 0 0% 54%;
   --contrast-500: 0 0% 34%;
+  --font-family-heading:
+    'DM Serif Text', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-family-body:
+    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family-mono:
+    'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --font-feature-settings-heading: normal;
+  --font-feature-settings-body: normal;
+  --font-feature-settings-mono: normal;
   --font-variation-settings-body: 'slnt' 0;
   --font-variation-settings-heading: 'slnt' 0;
+  --font-variation-settings-mono: normal;
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
   --font-size-base: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commerce-toolkit",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "A collection of modern, accessible commerce UI components",
   "type": "module",
   "main": "./dist/index.cjs",