@fastyshop/ui 0.1.0 → 0.2.0

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @generated by scripts/tokens/build.mjs; dataset 1.0.1; source-sha256 15d6333e284ffa92b707f3bc034208848c9e35409b5f8179552ab48814ad6002 */
+/* @generated by scripts/tokens/build.mjs; dataset 1.1.0; source-sha256 4e92238eeddd7378ce6517e9396a0a6c87a0a77c6eb621c1c09b740acd2fa7f0 */
 @font-face {
   font-family: "InterVariable";
   src: url("./fonts/InterVariable.woff2") format("woff2");
@@ -128,6 +128,8 @@
   --fs-layout-panel-padding: 1rem;
   --fs-layout-section-gap: 2rem;
   --fs-layout-marketing-gap: 3rem;
+  --fs-layout-grid-columns: 4;
+  --fs-layout-grid-column-gap: 1rem;
   --fs-control-visible-dense: 2rem;
   --fs-control-visible-default: 2.75rem;
   --fs-control-visible-touch: 2.75rem;
@@ -136,6 +138,8 @@
   --fs-control-target-touch: 2.75rem;
   --fs-focus-width: 2px;
   --fs-focus-offset: 2px;
+  --fs-layout-content-form-max: 32rem;
+  --fs-layout-content-prose-max: 42rem;
   --fs-font-family-sans: "InterVariable", "Inter", ui-sans-serif, system-ui, sans-serif;
   --fs-radius-sm: 0.25rem;
   --fs-radius-md: 0.5rem;
@@ -300,6 +304,8 @@
     --fs-layout-panel-padding: 1.25rem;
     --fs-layout-section-gap: 3rem;
     --fs-layout-marketing-gap: 4rem;
+    --fs-layout-grid-columns: 8;
+    --fs-layout-grid-column-gap: 1.5rem;
     --fs-control-visible-default: 2.5rem;
   }
 }
@@ -310,6 +316,7 @@
     --fs-layout-panel-padding: 1.5rem;
     --fs-layout-section-gap: 4rem;
     --fs-layout-marketing-gap: 5rem;
+    --fs-layout-grid-columns: 12;
   }
 }
 
@@ -472,6 +479,7 @@
 .fs-button__loading-indicator .fs-button__spinner {
   inline-size: min(var(--fs-button-icon-size), var(--fs-button-padding-inline));
   block-size: min(var(--fs-button-icon-size), var(--fs-button-padding-inline));
+  flex-basis: min(var(--fs-button-icon-size), var(--fs-button-padding-inline));
 }
 
 .fs-button__icon,
@@ -479,20 +487,10 @@
   inline-size: var(--fs-button-icon-size);
   block-size: var(--fs-button-icon-size);
   flex: 0 0 var(--fs-button-icon-size);
-  stroke-width: var(--fs-icon-stroke-default);
-}
-
-.fs-button__spinner {
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  animation: fs-button-spin var(--fs-motion-duration-slow) linear infinite;
 }
 
-@keyframes fs-button-spin {
-  to {
-    transform: rotate(360deg);
-  }
+.fs-button__icon {
+  stroke-width: var(--fs-icon-stroke-default);
 }
 
 @media (min-width: 48rem) {
@@ -511,8 +509,211 @@
   }
 }
 
+.fs-separator {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: 0 solid var(--fs-color-border);
+}
+
+.fs-separator[data-orientation="horizontal"] {
+  inline-size: 100%;
+  border-block-start-width: var(--fs-border-width);
+}
+
+.fs-separator[data-orientation="vertical"] {
+  align-self: stretch;
+  border-inline-start-width: var(--fs-border-width);
+}
+
+@media (forced-colors: active) {
+  .fs-separator {
+    border-color: CanvasText;
+    forced-color-adjust: auto;
+  }
+}
+
+.fs-skeleton {
+  display: block;
+  box-sizing: border-box;
+  border: var(--fs-border-width) solid var(--fs-color-border-subtle);
+  background: var(--fs-color-surface-subtle);
+  animation: fs-skeleton-pulse 2s ease-in-out infinite;
+}
+
+@layer components {
+  .fs-skeleton {
+    border-radius: var(--fs-radius-md);
+  }
+}
+
+@keyframes fs-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fs-skeleton {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .fs-skeleton {
+    border-color: CanvasText;
+    background: Canvas;
+    animation: none;
+    opacity: 1;
+  }
+}
+
+.fs-spinner {
+  --fs-spinner-size: var(--fs-icon-size-md);
+
+  display: inline-block;
+  inline-size: var(--fs-spinner-size);
+  block-size: var(--fs-spinner-size);
+  flex: 0 0 var(--fs-spinner-size);
+  overflow: visible;
+  color: inherit;
+  stroke: currentColor;
+  stroke-width: var(--fs-icon-stroke-default);
+  stroke-linecap: round;
+  vertical-align: middle;
+}
+
+.fs-spinner > path {
+  transform-origin: center;
+  transform-box: view-box;
+  animation: fs-spinner-rotate 900ms linear infinite;
+}
+
+.fs-spinner[data-fs-size="sm"] {
+  --fs-spinner-size: var(--fs-icon-size-sm);
+}
+
+.fs-spinner[data-fs-size="lg"] {
+  --fs-spinner-size: var(--fs-icon-size-lg);
+}
+
+@keyframes fs-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .fs-button__spinner {
-    animation-duration: var(--fs-motion-duration-slow);
+  .fs-spinner > path {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .fs-spinner {
+    forced-color-adjust: auto;
+    stroke: currentColor;
   }
 }
+
+@layer components {
+  .fs-typography {
+    margin: 0;
+    color: inherit;
+  }
+}
+
+.fs-typography[data-fs-variant="display-lg"] {
+  font-family: var(--fs-type-display-lg-font-family);
+  font-size: var(--fs-type-display-lg-font-size);
+  font-weight: var(--fs-type-display-lg-font-weight);
+  line-height: var(--fs-type-display-lg-line-height);
+  letter-spacing: var(--fs-type-display-lg-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="display-md"] {
+  font-family: var(--fs-type-display-md-font-family);
+  font-size: var(--fs-type-display-md-font-size);
+  font-weight: var(--fs-type-display-md-font-weight);
+  line-height: var(--fs-type-display-md-line-height);
+  letter-spacing: var(--fs-type-display-md-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="heading-lg"] {
+  font-family: var(--fs-type-heading-lg-font-family);
+  font-size: var(--fs-type-heading-lg-font-size);
+  font-weight: var(--fs-type-heading-lg-font-weight);
+  line-height: var(--fs-type-heading-lg-line-height);
+  letter-spacing: var(--fs-type-heading-lg-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="heading-md"] {
+  font-family: var(--fs-type-heading-md-font-family);
+  font-size: var(--fs-type-heading-md-font-size);
+  font-weight: var(--fs-type-heading-md-font-weight);
+  line-height: var(--fs-type-heading-md-line-height);
+  letter-spacing: var(--fs-type-heading-md-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="heading-sm"] {
+  font-family: var(--fs-type-heading-sm-font-family);
+  font-size: var(--fs-type-heading-sm-font-size);
+  font-weight: var(--fs-type-heading-sm-font-weight);
+  line-height: var(--fs-type-heading-sm-line-height);
+  letter-spacing: var(--fs-type-heading-sm-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="body-lg"] {
+  font-family: var(--fs-type-body-lg-font-family);
+  font-size: var(--fs-type-body-lg-font-size);
+  font-weight: var(--fs-type-body-lg-font-weight);
+  line-height: var(--fs-type-body-lg-line-height);
+  letter-spacing: var(--fs-type-body-lg-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="body-md"] {
+  font-family: var(--fs-type-body-md-font-family);
+  font-size: var(--fs-type-body-md-font-size);
+  font-weight: var(--fs-type-body-md-font-weight);
+  line-height: var(--fs-type-body-md-line-height);
+  letter-spacing: var(--fs-type-body-md-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="body-sm"] {
+  font-family: var(--fs-type-body-sm-font-family);
+  font-size: var(--fs-type-body-sm-font-size);
+  font-weight: var(--fs-type-body-sm-font-weight);
+  line-height: var(--fs-type-body-sm-line-height);
+  letter-spacing: var(--fs-type-body-sm-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="label-md"] {
+  font-family: var(--fs-type-label-md-font-family);
+  font-size: var(--fs-type-label-md-font-size);
+  font-weight: var(--fs-type-label-md-font-weight);
+  line-height: var(--fs-type-label-md-line-height);
+  letter-spacing: var(--fs-type-label-md-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="label-sm"] {
+  font-family: var(--fs-type-label-sm-font-family);
+  font-size: var(--fs-type-label-sm-font-size);
+  font-weight: var(--fs-type-label-sm-font-weight);
+  line-height: var(--fs-type-label-sm-line-height);
+  letter-spacing: var(--fs-type-label-sm-letter-spacing);
+}
+
+.fs-typography[data-fs-variant="caption"] {
+  font-family: var(--fs-type-caption-font-family);
+  font-size: var(--fs-type-caption-font-size);
+  font-weight: var(--fs-type-caption-font-weight);
+  line-height: var(--fs-type-caption-line-height);
+  letter-spacing: var(--fs-type-caption-letter-spacing);
+}

package/dist/tailwind-theme.css

@@ -1,5 +1,8 @@
-/* @generated by scripts/tokens/build.mjs; dataset 1.0.1; source-sha256 15d6333e284ffa92b707f3bc034208848c9e35409b5f8179552ab48814ad6002 */
+/* @generated by scripts/tokens/build.mjs; dataset 1.1.0; source-sha256 4e92238eeddd7378ce6517e9396a0a6c87a0a77c6eb621c1c09b740acd2fa7f0 */
 @theme inline {
+  --breakpoint-*: initial;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
   --color-fs-canvas: var(--fs-color-canvas);
   --color-fs-surface: var(--fs-color-surface);
   --color-fs-surface-subtle: var(--fs-color-surface-subtle);
@@ -109,6 +112,7 @@
   --spacing-fs-page-gutter: var(--fs-layout-page-gutter);
   --spacing-fs-panel-padding: var(--fs-layout-panel-padding);
   --spacing-fs-section-gap: var(--fs-layout-section-gap);
+  --spacing-fs-grid-column-gap: var(--fs-layout-grid-column-gap);
   --spacing-fs-control-default: var(--fs-control-visible-default);
   --spacing-fs-target-touch: var(--fs-control-target-touch);
   --radius-fs-sm: var(--fs-radius-sm);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastyshop/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -46,14 +46,15 @@
     "react-dom": "19.2.8"
   },
   "dependencies": {
-    "@base-ui/react": "1.7.0"
+    "@base-ui/react": "1.7.0",
+    "clsx": "2.1.1"
   },
   "scripts": {
     "clean": "node --eval \"import('node:fs').then(({ rmSync }) => rmSync('dist', { recursive: true, force: true }))\"",
-    "build:js": "tsc -p tsconfig.build.json",
+    "build:js": "node ../../scripts/catalog/build.mjs --write && tsc -p tsconfig.build.json",
     "build:css": "node ./scripts/copy-assets.mjs",
     "build": "pnpm clean && pnpm build:js && pnpm build:css",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "typecheck": "node ../../scripts/catalog/build.mjs --write && tsc -p tsconfig.json --noEmit",
     "verify:font": "node ./scripts/verify-font.mjs && node --test ./scripts/tests/*.test.mjs",
     "verify": "pnpm verify:font && node ./scripts/verify-package.mjs && tsc -p ./scripts/tsconfig.json"
   }

package/dist/button.d.ts

@@ -1,44 +0,0 @@
-import { type ButtonHTMLAttributes, type ComponentType, type ReactNode, type SVGProps } from "react";
-/** @inline */
-type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
-/** @inline */
-type ButtonSize = "sm" | "md" | "lg";
-/** @inline */
-type ButtonIcon = ComponentType<SVGProps<SVGSVGElement>>;
-/** @inline */
-type ButtonOwnProps = {
-    /** Visual and semantic emphasis of the action. */
-    variant?: ButtonVariant;
-    /** Visible face size. Medium resolves to 44px on mobile and 40px at tablet widths. */
-    size?: ButtonSize;
-    /** Controlled pending state. It preserves the label and blocks native activation. */
-    loading?: boolean;
-    /** Consumer-provided Lucide-compatible SVG component. */
-    icon?: ButtonIcon;
-    /** Placement of a decorative icon next to a visible label. */
-    iconPosition?: "start" | "end";
-};
-/** @inline */
-type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps | "children">;
-/** @inline */
-type TextButtonProps = ButtonOwnProps & NativeButtonProps & {
-    children: Exclude<ReactNode, boolean | null | undefined>;
-};
-/** @inline */
-type IconOnlyButtonProps = Omit<ButtonOwnProps, "iconPosition"> & NativeButtonProps & {
-    "aria-label": string;
-    children?: never;
-    icon: ButtonIcon;
-    iconPosition?: never;
-};
-/** Public props for the FastyShop action Button. */
-export type ButtonProps = TextButtonProps | IconOnlyButtonProps;
-/**
- * Production action primitive backed by Base UI.
- *
- * Use a link for navigation. `loading` is controlled by the consumer and does
- * not own an async lifecycle, success state or error copy.
- */
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};
-//# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAKL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,QAAQ,EACd,MAAM,OAAO,CAAC;AAEf,cAAc;AACd,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,CAAC;AACvE,cAAc;AACd,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,cAAc;AACd,KAAK,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEzD,cAAc;AACd,KAAK,cAAc,GAAG;IACpB,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sFAAsF;IACtF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAChC,CAAC;AAEF,cAAc;AACd,KAAK,iBAAiB,GAAG,IAAI,CAC3B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,cAAc,GAAG,UAAU,CAClC,CAAC;AAEF,cAAc;AACd,KAAK,eAAe,GAAG,cAAc,GACnC,iBAAiB,GAAG;IAClB,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CAC1D,CAAC;AAEJ,cAAc;AACd,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,GAC7D,iBAAiB,GAAG;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CAAC;AAEJ,oDAAoD;AACpD,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,mBAAmB,CAAC;AAwBhE;;;;;GAKG;AACH,eAAO,MAAM,MAAM,2GAkEjB,CAAC"}

package/dist/button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":"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"}