npm - @aurora-ds/lib-test - Versions diffs - 0.0.1-dev.1 - Mend

@aurora-ds/lib-test 0.0.1-dev.1

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 (247) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,134 @@
+# @my-org/ui-kit
+A React 19 UI kit built with **Vite 8** (library mode), **Vanilla Extract**
+(zero-runtime, typed CSS-in-TS) and **Radix UI** primitives. Components are
+previewed with **Storybook**.
+## Features
+- ⚛️ React 19 + TypeScript, ships ESM + CJS + type declarations
+- 🎨 Vanilla Extract design system — a fully typed token theme
+  (colors, spacing, radius, font sizes/weights, shadows, z-index)
+- 🧩 Radix-based components styled with Vanilla Extract `recipe()` (the typed
+  replacement for `cva`), composed with `clsx`
+- 📚 Storybook for interactive component docs
+- ✅ ESLint flat config (typescript-eslint, react-hooks, jsx-a11y, storybook) + Prettier
+## Install (in a consuming app)
+```bash
+yarn add @my-org/ui-kit react react-dom
+```
+Import the stylesheet once (e.g. in your root layout/entry):
+```ts
+import '@my-org/ui-kit/styles.css';
+```
+Then use components:
+```tsx
+import { Text } from '@my-org/ui-kit';
+export function Example() {
+  return (
+    <>
+      <Text variant="h1">Hello world</Text>
+      <Text variant="muted">A typographic primitive.</Text>
+      <Text variant="code">@my-org/ui-kit</Text>
+    </>
+  );
+}
+```
+### Theming
+The design system is the single source of truth for tokens, organised by
+category under `src/theme/tokens/` (`colors.ts`, `spacing.ts`, `radii.ts`,
+`typography.ts`, `shadows.ts`, `zIndex.ts`, `motion.ts`) and built on top of a
+primitive OKLCH `palette.ts`. The typed contract and the light/dark theme
+registration live in `src/theme/contract.css.ts`.
+The kit ships with complete **light and dark** themes. Dark mode follows the
+OS by default (`prefers-color-scheme`) and can be forced per-subtree:
+```html
+<html data-theme="dark"> ...   <!-- force dark -->
+<html data-theme="light"> ...  <!-- force light -->
+<html> ...                     <!-- auto: follow the OS -->
+```
+Tokens are available two ways:
+**1. Typed `vars` (inside `*.css.ts`, fully autocompleted):**
+```ts
+import { style } from '@vanilla-extract/css';
+import { vars } from '@my-org/ui-kit';
+export const card = style({
+  backgroundColor: vars.color.card,
+  color: vars.color.cardForeground,
+  padding: vars.space.lg,
+  borderRadius: vars.radius.md,
+  boxShadow: vars.shadow.sm,
+});
+```
+**2. Plain CSS variables** — every token is emitted on `:root` with a stable,
+human-readable name derived from its path (`--color-primary`, `--space-md`,
+`--radius-sm`, …). Use them in any stylesheet, or override them to retheme:
+```css
+:root {
+  --color-primary: oklch(0.55 0.2 250); /* rebrand the whole kit */
+  --radius-md: 0.25rem;
+}
+```
+Both stay in sync automatically — overriding a CSS variable also updates every
+component that references it through `vars`.
+## Components
+### `Text`
+Polymorphic typography primitive.
+| Prop       | Type                                                                                          | Default | Description                                  |
+| ---------- | --------------------------------------------------------------------------------------------- | ------- | -------------------------------------------- |
+| `variant`  | `h1 \| h2 \| h3 \| h4 \| p \| lead \| large \| small \| muted \| blockquote \| code`          | `p`     | Visual style + default semantic HTML element |
+| `weight`   | `normal \| medium \| semibold \| bold`                                                        | —       | Font weight override                         |
+| `align`    | `left \| center \| right`                                                                     | —       | Text alignment                               |
+| `truncate` | `boolean`                                                                                      | —       | Truncate overflow with ellipsis              |
+| `as`       | `React.ElementType`                                                                           | —       | Override the rendered element                |
+## Scripts
+| Command                | Description                                  |
+| ---------------------- | -------------------------------------------- |
+| `yarn dev`             | Build the library in watch mode              |
+| `yarn build`           | Type-check and build (ESM, CJS, d.ts, CSS)   |
+| `yarn storybook`       | Run Storybook dev server on port 6006        |
+| `yarn build-storybook` | Build the static Storybook site              |
+| `yarn lint`            | Run ESLint                                   |
+| `yarn typecheck`       | Type-check without emitting                  |
+| `yarn format`          | Format with Prettier                         |
+## Publishing
+`yarn build` produces `dist/`. The `prepublishOnly` hook runs the build
+automatically, and `files` limits the published package to `dist/`.
+```bash
+yarn publish --access public
+```
+## Adding more components
+Place new components under `src/components/<group>/<name>/` (e.g. `actions/`,
+`foundation/`), re-export them from `src/index.ts`, and add a `*.stories.tsx`
+file next to each component. Define styles in a colocated `*.styles.css.ts`
+file using Vanilla Extract `recipe()` / `style()` and the design tokens
+(`vars`), then compose class names with the `mergeClassNames()` helper.

package/dist/components/actions/_shared/buttons/constants/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { ButtonSizeShared } from '../types';
+import { IconSize } from '../../../../foundation/icon';
+/** Size-to-icon-size mapping shared by Button and IconButton. */
+export declare const buttonSizeToIconSize: Record<NonNullable<ButtonSizeShared>, IconSize>;

package/dist/components/actions/_shared/buttons/styles/buttonShared.css.d.ts ADDED Viewed

@@ -0,0 +1,349 @@
+export declare const iconReset: string;
+export declare const buttonBaseStyles: {
+    display: "inline-flex";
+    alignItems: "center";
+    justifyContent: "center";
+    lineHeight: `var(--${string})`;
+    borderRadius: `var(--${string})`;
+    border: "1px solid transparent";
+    cursor: "pointer";
+    fontFamily: `var(--${string})`;
+    transition: string;
+    selectors: {
+        '&:focus-visible': {
+            outline: "none";
+            boxShadow: `0 0 0 2px var(--${string}), 0 0 0 4px var(--${string})`;
+        };
+        '&:disabled': {
+            pointerEvents: "none";
+            opacity: number;
+        };
+    };
+};
+/** Variant dimension shared by Button and IconButton. */
+export declare const sharedButtonVariantVariants: {
+    contained: {};
+    outlined: {
+        backgroundColor: "transparent";
+    };
+    ghost: {
+        backgroundColor: "transparent";
+    };
+};
+/** Color dimension shared by Button and IconButton. */
+export declare const sharedButtonColorVariants: {
+    primary: {};
+    secondary: {};
+    destructive: {};
+    success: {};
+    warning: {};
+    info: {};
+};
+/** Compound variants shared by Button and IconButton (variant × color). */
+export declare const sharedButtonCompoundVariants: ({
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "primary";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "secondary";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "destructive";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "success";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "warning";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "info";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "primary";
+    };
+    readonly style: {
+        readonly borderColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "secondary";
+    };
+    readonly style: {
+        readonly borderColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "destructive";
+    };
+    readonly style: {
+        readonly borderColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "success";
+    };
+    readonly style: {
+        readonly borderColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "warning";
+    };
+    readonly style: {
+        readonly borderColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "info";
+    };
+    readonly style: {
+        readonly borderColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "primary";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "secondary";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "destructive";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "success";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "warning";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+} | {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "info";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+})[];
+/** Default variants shared by Button and IconButton. */
+export declare const sharedButtonDefaultVariants: {
+    variant: "contained";
+    color: "primary";
+    size: "md";
+};

package/dist/components/actions/_shared/buttons/styles/variants/contained.d.ts ADDED Viewed

@@ -0,0 +1,107 @@
+/**
+ * Compound variants for the "contained" (solid) visual variant.
+ * Every intent follows the same pattern: solid fill + Hover/Active states.
+ */
+export declare const containedCompoundVariants: readonly [{
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "primary";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "secondary";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "destructive";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "success";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "warning";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "contained";
+        readonly color: "info";
+    };
+    readonly style: {
+        readonly backgroundColor: `var(--${string})`;
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}];

package/dist/components/actions/_shared/buttons/styles/variants/ghost.d.ts ADDED Viewed

@@ -0,0 +1,100 @@
+/**
+ * Compound variants for the "ghost" visual variant.
+ */
+export declare const ghostCompoundVariants: readonly [{
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "primary";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "secondary";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "destructive";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "success";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "warning";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "ghost";
+        readonly color: "info";
+    };
+    readonly style: {
+        readonly color: `var(--${string})`;
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}];