@techsio/ui-kit 0.3.2 → 0.4.1

package/src/tokens/index.css

@@ -1,67 +1,3 @@
 @import "tailwindcss";
 @plugin 'tailwindcss-animate';
-
-/* Primitive tokens */
-@import "./_base.css";
-@import "./_colors.css";
-@import "./_spacing.css";
-@import "./_typography.css";
-@import "./_layout.css";
-
-/* Semantic tokens (dependent on primitives) */
-@import "./_semantic.css";
-
-/* Component tokens (dependent on semantic) */
-@import "./components/components.css";
-
-:root {
-  color-scheme: light dark;
-}
-
-.light {
-  color-scheme: light;
-}
-
-.dark {
-  color-scheme: dark;
-}
-
-.always-light {
-  color-scheme: light;
-}
-
-.always-dark {
-  color-scheme: dark;
-}
-
-@media (prefers-color-scheme: light) {
-  .reverse {
-    color-scheme: dark;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .reverse {
-    color-scheme: light;
-  }
-}
-
-.light .reverse {
-  color-scheme: dark;
-}
-
-.dark .reverse {
-  color-scheme: light;
-}
-
-body {
-  background-color: var(--color-base);
-  color: var(--color-fg-primary);
-
-  font-family: system-ui, sans-serif;
-}
-
-.sbdocs-preview {
-  background-color: var(--color-base) !important;
-  color: var(--color-fg-primary) !important;
-}
+@import "./_tokens-base.css";

package/src/tokens/theme.css

@@ -0,0 +1,95 @@
+/*
+ * Techsio app theme.
+ *
+ * Import after @techsio/ui-kit/tokens in an app stylesheet. This file keeps the
+ * component token graph intact and only overrides semantic/app-level values.
+ */
+
+:root {
+  color-scheme: light dark;
+
+  --font-sans:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  --font-body: var(--font-sans);
+  --font-heading: var(--font-sans);
+
+  --color-brand-blue: oklch(57% 0.18 249);
+  --color-brand-blue-dark: oklch(74% 0.14 235);
+  --color-brand-green: oklch(64% 0.16 153);
+  --color-brand-coral: oklch(66% 0.16 28);
+  --color-brand-gold: oklch(78% 0.14 82);
+
+  --color-page-bg: light-dark(oklch(98% 0.012 248), oklch(17% 0.025 250));
+  --color-page-fg: light-dark(oklch(21% 0.03 252), oklch(94% 0.014 248));
+  --color-surface: light-dark(oklch(100% 0 0), oklch(22% 0.027 250));
+  --color-surface-subtle: light-dark(
+    oklch(95% 0.016 248),
+    oklch(27% 0.028 250)
+  );
+  --color-border-muted: light-dark(oklch(86% 0.024 248), oklch(38% 0.032 250));
+
+  --color-primary: light-dark(
+    var(--color-brand-blue),
+    var(--color-brand-blue-dark)
+  );
+  --color-secondary: var(--color-brand-green);
+  --color-tertiary: var(--color-brand-coral);
+  --color-info: light-dark(oklch(58% 0.14 210), oklch(77% 0.13 210));
+  --color-success: light-dark(oklch(58% 0.15 151), oklch(74% 0.14 151));
+  --color-warning: light-dark(var(--color-brand-gold), oklch(83% 0.13 82));
+  --color-danger: light-dark(oklch(58% 0.19 26), oklch(72% 0.16 26));
+
+  --color-base: var(--color-page-bg);
+  --color-base-reverse: var(--color-page-fg);
+  --color-bg-transparent-base: transparent;
+  --color-bg-disabled-base: light-dark(
+    oklch(91% 0.014 248),
+    oklch(31% 0.023 250)
+  );
+  --color-border-primary-base: var(--color-border-muted);
+  --color-border-disabled-base: light-dark(
+    oklch(82% 0.018 248),
+    oklch(35% 0.025 250)
+  );
+
+  --default-ring-style: solid;
+  --default-ring-width: 2px;
+  --default-ring-offset: 2px;
+
+  accent-color: var(--color-primary);
+  background: var(--color-page-bg);
+  color: var(--color-page-fg);
+  font-family: var(--font-body);
+}
+
+html {
+  background: var(--color-page-bg);
+}
+
+body {
+  background: var(--color-page-bg);
+  color: var(--color-page-fg);
+  font-family: var(--font-body);
+}
+
+::selection {
+  background: color-mix(in oklab, var(--color-primary) 32%, transparent);
+}
+
+@media (forced-colors: active) {
+  :root {
+    --color-page-bg: Canvas;
+    --color-page-fg: CanvasText;
+    --color-surface: Canvas;
+    --color-surface-subtle: Canvas;
+    --color-border-muted: ButtonBorder;
+    --color-primary: Highlight;
+    --color-secondary: LinkText;
+    --color-tertiary: Mark;
+    --color-info: LinkText;
+    --color-success: Highlight;
+    --color-warning: Mark;
+    --color-danger: Mark;
+  }
+}

package/src/tokens/tokens-only.css

@@ -1,66 +1,3 @@
 /* Tokens only - without Tailwind import */
 /* This file is for apps that import Tailwind themselves */
-
-/* Primitive tokens */
-@import "./_base.css";
-@import "./_colors.css";
-@import "./_spacing.css";
-@import "./_typography.css";
-
-/* Semantic tokens (dependent on primitives) */
-@import "./_semantic.css";
-
-/* Component tokens (dependent on semantic) */
-@import "./components/components.css";
-
-/* Base styles */
-:root {
-  color-scheme: light dark;
-}
-
-.light {
-  color-scheme: light;
-}
-
-.dark {
-  color-scheme: dark;
-}
-
-.always-light {
-  color-scheme: light;
-}
-
-.always-dark {
-  color-scheme: dark;
-}
-
-@media (prefers-color-scheme: light) {
-  .reverse {
-    color-scheme: dark;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .reverse {
-    color-scheme: light;
-  }
-}
-
-.light .reverse {
-  color-scheme: dark;
-}
-
-.dark .reverse {
-  color-scheme: light;
-}
-
-body {
-  background-color: var(--color-base);
-  color: var(--color-fg-primary);
-  font-family: system-ui, sans-serif;
-}
-
-.sbdocs-preview {
-  background-color: var(--color-base) !important;
-  color: var(--color-fg-primary) !important;
-}
+@import "./_tokens-base.css";

package/dist/atoms/error-text.js

@@ -1,38 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { tv } from "../utils.js";
-import { Icon } from "./icon.js";
-const errorVariants = tv({
-    base: [
-        'text-error-fg',
-        'flex items-center gap-1'
-    ],
-    variants: {
-        size: {
-            sm: 'text-error-sm',
-            md: 'text-error-md',
-            lg: 'text-error-lg'
-        }
-    },
-    defaultVariants: {
-        size: 'md'
-    }
-});
-function ErrorText({ className, showIcon, children, ref, size, ...props }) {
-    return /*#__PURE__*/ jsxs("div", {
-        ref: ref,
-        className: errorVariants({
-            size,
-            className
-        }),
-        ...props,
-        children: [
-            showIcon && /*#__PURE__*/ jsx(Icon, {
-                icon: "token-icon-error"
-            }),
-            /*#__PURE__*/ jsx("span", {
-                children: children
-            })
-        ]
-    });
-}
-export { ErrorText };

package/dist/atoms/extra-text.js

@@ -1,27 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { tv } from "../utils.js";
-const extraTextVariants = tv({
-    base: [
-        'text-helper-fg'
-    ],
-    variants: {
-        size: {
-            sm: 'text-helper-sm',
-            md: 'text-helper-md',
-            lg: 'text-helper-lg'
-        }
-    },
-    defaultVariants: {
-        size: 'md'
-    }
-});
-function ExtraText({ children, size, ...props }) {
-    return /*#__PURE__*/ jsx("span", {
-        className: extraTextVariants({
-            size
-        }),
-        ...props,
-        children: children
-    });
-}
-export { ExtraText };

package/dist/molecules/checkbox.js

@@ -1,98 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { connect, machine } from "@zag-js/checkbox";
-import { normalizeProps, useMachine } from "@zag-js/react";
-import { useId } from "react";
-import { ErrorText } from "../atoms/error-text.js";
-import { ExtraText } from "../atoms/extra-text.js";
-import { Label } from "../atoms/label.js";
-import { tv } from "../utils.js";
-const checkboxVariants = tv({
-    slots: {
-        root: [],
-        label: [
-            'flex items-center gap-2 cursor-pointer'
-        ],
-        checkbox: [
-            'appearance-none relative cursor-pointer flex-shrink-0',
-            'h-checkbox w-checkbox',
-            'border border-checkbox-border rounded-checkbox',
-            'bg-checkbox data-[state=checked]:bg-checkbox-checked',
-            'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',
-            'data-[state=checked]:after:token-icon-checkbox text-icon-fg data-[state=checked]:text-checkbox-icon-md',
-            'data-[disabled]:cursor-not-allowed',
-            'data-[disabled]:bg-checkbox-bg-disabled',
-            'data-[disabled]:text-checkbox-fg-disabled',
-            'data-[disabled]:border-checkbox-border-disabled',
-            'data-[disabled]:data-[state=checked]:bg-checkbox-bg-disabled',
-            'data-[disabled]:data-[state=checked]:text-checkbox-fg-disabled',
-            'data-[disabled]:data-[state=checked]:border-checkbox-border-disabled',
-            'transition-all duration-200',
-            'data-[focus]:outline-none',
-            'data-[focus]:ring',
-            'data-[focus]:ring-checkbox-ring',
-            'data-[invalid]:ring-checkbox-error ',
-            'data-[invalid]:border-checkbox-border-error',
-            'data-[state=indeterminate]:bg-checkbox-indeterminate',
-            'data-[state=indeterminate]:after:w-indeterminate data-[state=indeterminate]:after:h-indeterminate',
-            'data-[state=indeterminate]:after:bg-icon-fg'
-        ]
-    }
-});
-function Checkbox({ id, name, checked, defaultChecked, indeterminate, disabled, onCheckedChange, className, invalid, readOnly, labelText, errorText, helperText }) {
-    const fallbackId = useId();
-    const service = useMachine(machine, {
-        id: id || fallbackId,
-        name,
-        disabled,
-        defaultChecked,
-        readOnly,
-        checked: indeterminate ? 'indeterminate' : checked,
-        invalid: invalid,
-        onCheckedChange: (details)=>{
-            onCheckedChange?.(details);
-        }
-    });
-    const api = connect(service, normalizeProps);
-    const { checkbox: checkboxSlot, root, label: labelSlot } = checkboxVariants({
-        className
-    });
-    return /*#__PURE__*/ jsxs("div", {
-        className: root({
-            className
-        }),
-        children: [
-            /*#__PURE__*/ jsxs(Label, {
-                className: labelSlot(),
-                ...api.getRootProps(),
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        ...api.getControlProps(),
-                        className: checkboxSlot({
-                            className
-                        }),
-                        "data-invalid": invalid
-                    }),
-                    /*#__PURE__*/ jsx("input", {
-                        ...api.getHiddenInputProps()
-                    }),
-                    labelText && /*#__PURE__*/ jsx(Label, {
-                        ...api.getLabelProps(),
-                        children: labelText
-                    })
-                ]
-            }),
-            (errorText || helperText) && /*#__PURE__*/ jsxs("div", {
-                children: [
-                    invalid && errorText && /*#__PURE__*/ jsx(ErrorText, {
-                        children: errorText
-                    }),
-                    !invalid && helperText && /*#__PURE__*/ jsx(ExtraText, {
-                        children: helperText
-                    })
-                ]
-            })
-        ]
-    });
-}
-Checkbox.displayName = 'Checkbox';
-export { Checkbox };

package/dist/src/atoms/error-text.d.ts

@@ -1,29 +0,0 @@
-import type { HTMLAttributes, ReactNode, Ref } from 'react';
-import type { VariantProps } from 'tailwind-variants';
-declare const errorVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, string[], {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export interface ErrorProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof errorVariants> {
-    ref?: Ref<HTMLDivElement>;
-    showIcon?: boolean;
-    children: ReactNode;
-}
-export declare function ErrorText({ className, showIcon, children, ref, size, ...props }: ErrorProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=error-text.d.ts.map

package/dist/src/atoms/error-text.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-text.d.ts","sourceRoot":"","sources":["../../../src/atoms/error-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;qDAYjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,UAAU,2CAcZ"}

package/dist/src/atoms/extra-text.d.ts

@@ -1,27 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import type { VariantProps } from 'tailwind-variants';
-declare const extraTextVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, string[], {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export interface ExtraTextProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof extraTextVariants> {
-    children: ReactNode;
-}
-export declare function ExtraText({ children, size, ...props }: ExtraTextProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=extra-text.d.ts.map

package/dist/src/atoms/extra-text.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"extra-text.d.ts","sourceRoot":"","sources":["../../../src/atoms/extra-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;qDAYrB,CAAA;AAEF,MAAM,WAAW,cACf,SAAQ,cAAc,CAAC,eAAe,CAAC,EACrC,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAWrE"}

package/dist/src/molecules/checkbox.d.ts

@@ -1,19 +0,0 @@
-import * as checkbox from '@zag-js/checkbox';
-import { type InputHTMLAttributes, type Ref } from 'react';
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    ref?: Ref<HTMLInputElement>;
-    readOnly?: boolean;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    indeterminate?: boolean;
-    invalid?: boolean;
-    labelText?: string;
-    helperText?: string;
-    errorText?: string;
-    onCheckedChange?: checkbox.Props['onCheckedChange'];
-}
-export declare function Checkbox({ id, name, checked, defaultChecked, indeterminate, disabled, onCheckedChange, className, invalid, readOnly, labelText, errorText, helperText, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Checkbox {
-    var displayName: string;
-}
-//# sourceMappingURL=checkbox.d.ts.map

package/dist/src/molecules/checkbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/molecules/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AAE5C,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAS,MAAM,OAAO,CAAA;AAsCjE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC/D,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,eAAe,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;CACpD;AAED,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,IAAI,EACJ,OAAO,EACP,cAAc,EACd,aAAa,EACb,QAAQ,EACR,eAAe,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GACX,EAAE,aAAa,2CAgDf;yBA9De,QAAQ"}

package/src/tokens/components/molecules/_checkbox.css

@@ -1,34 +0,0 @@
-@theme static {
-  /* === BASE TOKEN MAPPING === */
-  --color-checkbox: var(--color-fill-active);
-  --color-checkbox-error: var(--color-danger);
-  --color-checkbox-checked: var(--color-success);
-  --color-checkbox-border: var(--color-border-primary);
-
-  /* === DISABLED STATE === */
-  /* Using unified disabled tokens for consistency across all components */
-  --color-checkbox-bg-disabled: var(--color-bg-disabled);
-  --color-checkbox-fg-disabled: var(--color-fg-disabled);
-  --color-checkbox-border-disabled: var(--color-border-disabled);
-
-  --color-checkbox-indeterminate: var(--color-primary);
-
-  --color-checkbox-ring: var(--color-ring);
-  --color-checkbox-border-error: var(--color-checkbox-error);
-
-  --spacing-checkbox: var(--spacing-200);
-  --color-icon-fg: var(--color-fg-dark);
-  --text-checkbox-icon-md: var(--text-xs);
-  --radius-checkbox: var(--radius-sm);
-
-  --width-indeterminate: 60%;
-  --height-indeterminate: 2px;
-}
-
-@utility token-icon-checkbox {
-  @apply icon-[mdi--check-bold];
-}
-
-@utility token-icon-checkbox-indeterminate {
-  @apply icon-[mdi--minus];
-}

package/src/tokens/components/molecules/index.css

@@ -1,2 +0,0 @@
-@import "./_pagination.css";
-@import "./_popover.css";