@forsyteco/product-ui 0.0.3 → 0.0.4

package/dist/relative-time/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './relative-time';
+export type { RelativeTimeProps } from './relative-time';
+//# sourceMappingURL=index.d.ts.map

package/dist/relative-time/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/relative-time/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/relative-time/relative-time.d.ts

@@ -0,0 +1,7 @@
+import { RelativeTimeElement } from '@github/relative-time-element';
+import { ComponentProps } from '../utils/types/component-props';
+declare const RelativeTimeComponent: import('@lit-labs/react').ReactWebComponent<RelativeTimeElement, {}>;
+declare function RelativeTime({ date, datetime, children, noTitle, ...props }: RelativeTimeProps): import("react").JSX.Element;
+export type RelativeTimeProps = ComponentProps<typeof RelativeTimeComponent>;
+export default RelativeTime;
+//# sourceMappingURL=relative-time.d.ts.map

package/dist/relative-time/relative-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../../src/relative-time/relative-time.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAGpE,QAAA,MAAM,qBAAqB,sEAAwD,CAAA;AAGnF,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAOvF;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAA;AAC5E,eAAe,YAAY,CAAA"}

package/dist/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,cAAc;;8EAanB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAC1H,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,iBAAS,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAkBhF;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,cAAc;;8EAanB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAC1H,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,iBAAS,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BA8BhF;AAED,eAAe,MAAM,CAAC"}

package/dist/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAkD,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,eAAe,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,YAAY,wDAA0D,CAAC;AAEpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,YAAuB,EACvB,WAAsB,EACtB,UAA8B,GAC/B,EAAE,kBAAkB,+BAoGpB;AAED,eAAe,aAAa,CAAC;AAE7B,wBAAgB,QAAQ,sBAIvB"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAkD,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,eAAe,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,YAAY,wDAA0D,CAAC;AAEpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,YAAuB,EACvB,WAAsB,EACtB,UAA8B,GAC/B,EAAE,kBAAkB,+BAiGpB;AAED,eAAe,aAAa,CAAC;AAE7B,wBAAgB,QAAQ,sBAIvB"}

package/dist/utils/create-component.d.ts

@@ -0,0 +1,5 @@
+import { EventName } from '@lit-labs/react';
+type EventNames = Record<string, EventName | string>;
+export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>(elementClass: new () => I, tagName: string, events?: E | undefined) => import('@lit-labs/react').ReactWebComponent<I, E>;
+export default createComponent;
+//# sourceMappingURL=create-component.d.ts.map

package/dist/utils/create-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-component.d.ts","sourceRoot":"","sources":["../../src/utils/create-component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAA;AAG9C,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC,CAAA;AAGpD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,UAAU,GAAG,EAAE,EAC9E,cAAc,UAAU,CAAC,EACzB,SAAS,MAAM,EACf,SAAQ,CAAC,GAAG,SAAqB,sDAYlC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/utils/types/component-props.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Extract a component's props
+ *
+ * Source: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#wrappingmirroring-a-component
+ *
+ * @example ComponentProps<typeof MyComponent>
+ */
+export type ComponentProps<T> = T extends React.ComponentType<React.PropsWithChildren<infer Props>> ? (Props extends object ? Props : never) : never;
+//# sourceMappingURL=component-props.d.ts.map

package/dist/utils/types/component-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-props.d.ts","sourceRoot":"","sources":["../../../src/utils/types/component-props.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,IAC1B,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsyteco/product-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "An implementation of Forsyte's product design system using React 🐝",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -16,10 +16,14 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./styles.css": "./styles.css",
+    "./fonts/*": "./fonts/*",
     "./tailwind": "./tailwind.config.js"
   },
   "files": [
     "dist",
+    "styles.css",
+    "fonts",
     "tailwind.config.js",
     "README.md"
   ],
@@ -36,7 +40,9 @@
   "author": "etiCloud Ltd",
   "license": "MIT",
   "dependencies": {
+    "@github/relative-time-element": "^5.0.0",
     "@headlessui/react": "^2.2.9",
+    "@lit-labs/react": "^2.1.3",
     "@tailwindcss/vite": "^4.1.17",
     "boring-avatars": "^2.0.4",
     "class-variance-authority": "^0.7.1",
@@ -51,8 +57,8 @@
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@storybook/addon-vitest": "^10.1.4",
-    "@storybook/react-vite": "^10.1.4",
+    "@storybook/addon-vitest": "^10.1.9",
+    "@storybook/react-vite": "^10.1.9",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/react": "19",
@@ -62,7 +68,7 @@
     "@vitest/ui": "^4.0.15",
     "jsdom": "^27.2.0",
     "playwright": "^1.57.0",
-    "storybook": "^10.1.4",
+    "storybook": "^10.1.9",
     "tailwindcss": "^4.1.17",
     "vite": "^7.2.6",
     "vite-plugin-dts": "^4.3.0",

package/styles.css

@@ -0,0 +1,179 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where([data-colour-mode="dark"]));
+
+@font-face {
+  font-family: "Plus Jakarta Sans";
+  src: url("./fonts/plus-jakarta-sans-[wght].woff2") format("woff2");
+  font-weight: 200 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Plus Jakarta Sans";
+  src: url("./fonts/plus-jakarta-sans-italic-[wght].woff2") format("woff2");
+  font-weight: 200 800;
+  font-style: italic;
+  font-display: swap;
+}
+
+@theme {
+  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+
+  --spacing: 0.25rem;
+
+  --text-xs: 0.75rem;               /* 12px */
+  --text-xs-line-height: 1rem;  
+
+  --text-sm: 0.8125rem;             /* 13px */
+  --text-sm-line-height: 1.125rem;
+
+  --text-base: 0.875rem;            /* 14px */
+  --text-base-line-height: 1.25rem;
+
+  --text-lg: 1rem;                  /* 16px */
+  --text-lg-line-height: 1.5rem;
+
+  --text-xl: 1.125rem;              /* 18px */
+  --text-xl-line-height: 1.75rem;
+
+  --text-2xl: 1.25rem;              /* 20px */
+  --text-2xl-line-height: 1.75rem;
+
+  --text-3xl: 1.563rem;             /* 25px */
+  --text-3xl-line-height: 2rem;
+
+  --text-4xl: 1.953rem;             /* 31px */
+  --text-4xl-line-height: 2.25rem;
+
+  --color-background: rgb(var(--background));
+  --color-foreground: rgb(var(--foreground));
+
+  --color-muted: rgb(var(--muted));
+  --color-muted-foreground: rgb(var(--muted-foreground));
+
+  --color-border: rgb(var(--border));
+  --color-input: rgb(var(--input));
+
+  --color-accent: rgb(var(--accent));
+  --color-accent-foreground: rgb(var(--accent-foreground));
+
+  --color-primary: rgb(var(--primary));
+  --color-primary-foreground: rgb(var(--primary-foreground));
+  --color-secondary: rgb(var(--secondary));
+  --color-secondary-foreground: rgb(var(--secondary-foreground));
+
+  --color-destructive: rgb(var(--destructive));
+  --color-destructive-foreground: rgb(var(--destructive-foreground));
+
+  --color-ring: rgb(var(--ring));
+
+  --color-card: rgb(var(--card));
+  --color-card-foreground: rgb(var(--card-foreground));
+  --color-popover: rgb(var(--popover));
+  --color-popover-foreground: rgb(var(--popover-foreground));
+
+  --color-spinner-primary: rgb(var(--accent));
+  --color-spinner-secondary: rgb(var(--neutral-200));
+  --color-spinner-tertiary: rgb(var(--brand-black));
+}
+
+:root {
+  color-scheme: light;
+
+  --brand-yellow: 255 222 19;
+  --brand-black: 0 0 0;
+  --brand-white: 255 255 255;
+
+  --neutral-950: 28 28 28;
+  --neutral-900: 42 43 45;
+  --neutral-800: 57 61 65;
+  --neutral-700: 71 78 87;
+  --neutral-200: 179 192 209;
+  --neutral-100: 196 207 222;
+
+  --background: var(--brand-white);
+  --foreground: var(--brand-black);
+
+  --muted: 244 245 247;
+  --muted-foreground: var(--neutral-700);
+
+  --border: var(--neutral-200);
+  --input: var(--neutral-200);
+
+  --accent: var(--brand-yellow);
+  --accent-foreground: var(--brand-black);
+
+  --primary: var(--brand-black);
+  --primary-foreground: var(--brand-white);
+
+  --secondary: 244 245 247;
+  --secondary-foreground: var(--brand-black);
+
+  --destructive: 220 38 38;
+  --destructive-foreground: var(--brand-white);
+
+  --ring: var(--brand-black);
+
+  --card: var(--brand-white);
+  --card-foreground: var(--brand-black);
+
+  --popover: var(--brand-white);
+  --popover-foreground: var(--brand-black);
+}
+
+:root:where([data-colour-scheme="blue"]) {
+  --accent: 37 99 235;
+  --accent-foreground: 255 255 255;
+}
+
+:root:where([data-colour-mode="dark"]) {
+  color-scheme: dark;
+
+  --background: var(--neutral-950);
+  --foreground: var(--brand-white);
+
+  --muted: var(--neutral-900);
+  --muted-foreground: var(--neutral-200);
+
+  --border: var(--neutral-800);
+  --input: var(--neutral-800);
+
+  --primary: var(--brand-white);
+  --primary-foreground: var(--brand-black);
+
+  --secondary: var(--neutral-900);
+  --secondary-foreground: var(--brand-white);
+
+  --ring: var(--brand-white);
+
+  --card: var(--neutral-950);
+  --card-foreground: var(--brand-white);
+
+  --popover: var(--neutral-950);
+  --popover-foreground: var(--brand-white);
+}
+
+body {
+  background-color: rgb(var(--background));
+  color: rgb(var(--foreground));
+  font-size: var(--text-base);
+  line-height: var(--text-base-line-height);
+}
+
+@keyframes spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+@keyframes spinner-dash {
+  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
+  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
+  100% { stroke-dasharray: 1, 150; stroke-dashoffset: -124; }
+}
+
+@utility animate-spinner-rotate {
+  animation: spinner-rotate 1.5s linear infinite;
+}
+
+@utility animate-spinner-dash {
+  animation: spinner-dash 1.5s ease-in-out infinite;
+}