@nightstem/ui 0.0.2-alpha.1 → 1.0.0

package/README.md

@@ -0,0 +1,98 @@
+# @nightstem/ui
+
+React UI primitives for the Nightstem design system.
+
+## Install
+
+```sh
+pnpm add @nightstem/ui @nightstem/tokens
+pnpm add -D tailwindcss
+```
+
+## Peer requirements
+
+- React 19+
+- `@nightstem/tokens` — provides the CSS design tokens (colors, typography, spacing). Technically optional but required for visual correctness.
+- Tailwind CSS v4 (transitive via `@nightstem/tokens`)
+
+## Set up tokens
+
+Import the tokens CSS once in your app's global stylesheet (before any component styles):
+
+```css
+@import '@nightstem/tokens/theme.css';
+```
+
+Optional Inter variable font:
+
+```css
+@import '@nightstem/tokens/fonts.css';
+```
+
+## Usage
+
+### Button
+
+```tsx
+import { Button, BUTTON_VARIANT, BUTTON_COLORS } from '@nightstem/ui';
+
+<Button>Click me</Button>
+<Button variant="outlined" color="secondary">Secondary</Button>
+<Button variant="ghost" color="primary" size="lg" disabled>Disabled</Button>
+```
+
+Props: `variant` (`solid` | `outlined` | `ghost` | `text`), `color` (`primary` | `secondary` | `neutral`), `size` (`sm` | `md` | `lg`), `shape` (`square` | `circle`). Extends all `<button>` HTML attributes.
+
+### LinkButton
+
+```tsx
+import { LinkButton } from '@nightstem/ui';
+
+// Plain anchor (default)
+<LinkButton href="/about">About</LinkButton>
+
+// External link
+<LinkButton href="https://example.com" target="_blank" rel="noreferrer noopener">
+  Open externally
+</LinkButton>
+
+// Using next/link
+import Link from 'next/link';
+<LinkButton href="/dashboard" linkComponent={Link}>Dashboard</LinkButton>
+
+// Using react-router
+import { Link } from 'react-router-dom';
+<LinkButton href="/home" linkComponent={Link}>Home</LinkButton>
+```
+
+Props: same visual props as `Button`, plus `linkComponent?: ElementType` (defaults to `<a>`). Extends all anchor HTML attributes.
+
+> **Migration note:** the upstream `isExternal` prop was removed. For external links, pass `target="_blank" rel="noreferrer noopener"` directly.
+
+### Kbd
+
+```tsx
+import { Kbd } from '@nightstem/ui';
+
+Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open the command palette.
+```
+
+Extends all `HTMLAttributes<HTMLElement>`.
+
+## Utilities
+
+```ts
+import { cn, hashIndex, randomInt } from '@nightstem/ui';
+
+cn('flex', isActive && 'bg-primary-500', 'p-4'); // clsx + tailwind-merge
+hashIndex('/some/path', 5); // deterministic int 0-4
+randomInt(10); // cryptographic random int 0-9
+```
+
+## Token note
+
+The `neutral` button color uses Tailwind's default `neutral-*` palette — it is not yet a named Nightstem brand token. All other colors (`primary-*`, `secondary-*`) are defined in `@nightstem/tokens`.
+
+## License
+
+MIT

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ui/Buttons';
+export * from './ui/Kbd';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC"}

package/dist/components/ui/Buttons/Button/Button.d.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { ButtonColor, ButtonShape, ButtonSize, ButtonVariant } from '../types';
+export type ButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    size?: ButtonSize;
+    color?: ButtonColor;
+    shape?: ButtonShape;
+    variant?: ButtonVariant;
+};
+declare const Button: ({ className, type, color, size, shape, variant, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/ui/Buttons/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Buttons/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACd,MAAM,+BAA+B,CAAC;AAcvC,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GAAG;IACF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,4DAQb,WAAW,4CAqBb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/ui/Buttons/Button/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Button';
+export { default as Button } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/Buttons/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Buttons/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/components/ui/Buttons/LinkButton/LinkButton.d.ts

@@ -0,0 +1,13 @@
+import { AnchorHTMLAttributes, ElementType } from 'react';
+import { ButtonColor, ButtonShape, ButtonSize, ButtonVariant } from '../types';
+export type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** Element or component used to render the link. Defaults to a plain <a>. Pass next/link, react-router Link, etc. */
+    linkComponent?: ElementType;
+    size?: ButtonSize;
+    color?: ButtonColor;
+    shape?: ButtonShape;
+    variant?: ButtonVariant;
+};
+declare const LinkButton: ({ className, linkComponent, color, size, shape, variant, ...props }: LinkButtonProps) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+export default LinkButton;
+//# sourceMappingURL=LinkButton.d.ts.map

package/dist/components/ui/Buttons/LinkButton/LinkButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Buttons/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACd,MAAM,+BAA+B,CAAC;AAcvC,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACtE,qHAAqH;IACrH,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,qEAQjB,eAAe,2FAejB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ui/Buttons/LinkButton/index.d.ts

@@ -0,0 +1,3 @@
+export * from './LinkButton';
+export { default as LinkButton } from './LinkButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/Buttons/LinkButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Buttons/LinkButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+CAA+C,CAAC"}

package/dist/components/ui/Buttons/constants.d.ts

@@ -0,0 +1,21 @@
+export declare const BUTTON_SHAPE: {
+    readonly SQUARE: "square";
+    readonly CIRCLE: "circle";
+};
+export declare const BUTTON_VARIANT: {
+    readonly SOLID: "solid";
+    readonly OUTLINED: "outlined";
+    readonly GHOST: "ghost";
+    readonly TEXT: "text";
+};
+export declare const BUTTON_SIZE: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export declare const BUTTON_COLORS: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly NEUTRAL: "neutral";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/ui/Buttons/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/Buttons/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,aAAa;;;;CAIhB,CAAC"}

package/dist/components/ui/Buttons/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Button';
+export * from './LinkButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/Buttons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/Buttons/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC"}

package/dist/components/ui/Buttons/themes.d.ts

@@ -0,0 +1,5 @@
+import { ButtonColor, ButtonShape, ButtonSize, ButtonVariant } from './types';
+export declare const THEME_SIZE: Record<ButtonSize, string>;
+export declare const THEME_SHAPE: Record<ButtonShape, string>;
+export declare const THEME_VARIANT: Record<ButtonVariant, Record<ButtonColor, string>>;
+//# sourceMappingURL=themes.d.ts.map

package/dist/components/ui/Buttons/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/Buttons/themes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACd,MAAM,+BAA+B,CAAC;AAIvC,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAIxC,CAAC;AAEX,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG1C,CAAC;AAEX,eAAO,MAAM,aAAa,EAAE,MAAM,CAChC,aAAa,EACb,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAkFnB,CAAC"}

package/dist/components/ui/Buttons/types.d.ts

@@ -0,0 +1,6 @@
+import { BUTTON_COLORS, BUTTON_SHAPE, BUTTON_SIZE, BUTTON_VARIANT } from './constants';
+export type ButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
+export type ButtonShape = (typeof BUTTON_SHAPE)[keyof typeof BUTTON_SHAPE];
+export type ButtonColor = (typeof BUTTON_COLORS)[keyof typeof BUTTON_COLORS];
+export type ButtonVariant = (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ui/Buttons/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/Buttons/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,YAAY,EACZ,WAAW,EACX,cAAc,EACf,MAAM,mCAAmC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAC7E,MAAM,MAAM,aAAa,GACvB,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/ui/Kbd/Kbd.d.ts

@@ -0,0 +1,5 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+export type KbdProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+declare const Kbd: ({ className, ...props }: KbdProps) => import("react/jsx-runtime").JSX.Element;
+export default Kbd;
+//# sourceMappingURL=Kbd.d.ts.map

package/dist/components/ui/Kbd/Kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/Kbd/Kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI/D,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CACtC,cAAc,CAAC,WAAW,CAAC,EAC3B,WAAW,CACZ,CAAC;AAEF,QAAA,MAAM,GAAG,GAAI,yBAAyB,QAAQ,4CAQ7C,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/components/ui/Kbd/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Kbd';
+export { default as Kbd } from './Kbd';
+export { default } from './Kbd';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/Kbd/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/Kbd/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/ui/Buttons';
+export * from './components/ui/Kbd';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,66 @@
+import { cn as e } from "@nightstem/utils";
+import { jsx as t } from "react/jsx-runtime";
+import { createElement as n } from "react";
+//#region src/components/ui/Buttons/constants.ts
+var r = {
+	SQUARE: "square",
+	CIRCLE: "circle"
+}, i = {
+	SOLID: "solid",
+	OUTLINED: "outlined",
+	GHOST: "ghost",
+	TEXT: "text"
+}, a = {
+	SM: "sm",
+	MD: "md",
+	LG: "lg"
+}, o = {
+	PRIMARY: "primary",
+	SECONDARY: "secondary",
+	NEUTRAL: "neutral"
+}, s = {
+	lg: "text-lg px-5 py-2.5",
+	md: "text-base px-4 py-2",
+	sm: "text-sm px-3 py-1.5"
+}, c = {
+	circle: "rounded-full",
+	square: "rounded-md"
+}, l = {
+	solid: {
+		primary: e("text-dark bg-primary-500", "hover:bg-primary-400 active:bg-primary-400", "focus-visible:ring-primary-500", "disabled:opacity-60 disabled:hover:bg-primary-500 disabled:active:bg-primary-500"),
+		secondary: e("text-dark bg-secondary-500", "hover:bg-secondary-400 active:bg-secondary-400", "focus-visible:ring-secondary-500", "disabled:opacity-60 disabled:hover:bg-secondary-500 disabled:active:bg-secondary-500"),
+		neutral: e("text-dark bg-neutral-400", "hover:bg-neutral-300 active:bg-neutral-300", "focus-visible:ring-neutral-400", "disabled:opacity-60 disabled:hover:bg-neutral-400 disabled:active:bg-neutral-400")
+	},
+	outlined: {
+		primary: e("text-primary-500 bg-transparent border border-primary-500", "hover:border-primary-400 active:border-primary-400 hover:bg-primary-500/20 active:bg-primary-500/20", "focus-visible:ring-primary-500", "disabled:opacity-60 disabled:hover:border-primary-500 disabled:active:border-primary-500"),
+		secondary: e("text-white bg-transparent border border-secondary-500", "hover:border-secondary-400 active:border-secondary-400 hover:bg-secondary-500/20 active:bg-secondary-500/20", "focus-visible:ring-secondary-500", "disabled:opacity-60 disabled:hover:border-secondary-500 disabled:active:border-secondary-500"),
+		neutral: e("text-neutral-400 bg-transparent border border-neutral-400", "hover:border-neutral-300 active:border-neutral-300 hover:bg-neutral-400/20 active:bg-neutral-400/20", "focus-visible:ring-neutral-400", "disabled:opacity-60 disabled:hover:border-neutral-400 disabled:active:border-neutral-400")
+	},
+	ghost: {
+		primary: e("text-primary-500 bg-transparent", "hover:text-dark hover:bg-primary-500/60 active:bg-primary-500/60", "focus-visible:ring-primary-500", "disabled:opacity-60 disabled:hover:text-primary-500 disabled:hover:bg-transparent disabled:active:bg-transparent"),
+		secondary: e("text-secondary-500 bg-transparent", "hover:text-dark hover:bg-secondary-500/60 active:bg-secondary-500/60", "focus-visible:ring-secondary-500", "disabled:opacity-60 disabled:hover:text-secondary-500 disabled:hover:bg-transparent disabled:active:bg-transparent"),
+		neutral: e("text-neutral-400 bg-transparent", "hover:text-dark hover:bg-neutral-400/60 active:bg-neutral-400/60", "focus-visible:ring-neutral-400", "disabled:opacity-60 disabled:hover:text-neutral-400 disabled:hover:bg-transparent disabled:active:bg-transparent")
+	},
+	text: {
+		primary: e("text-primary-500", "hover:text-primary-400 active:text-primary-400", "focus-visible:ring-primary-500", "disabled:opacity-60 disabled:hover:text-primary-500 disabled:hover:bg-transparent disabled:active:bg-transparent"),
+		secondary: e("text-secondary-500", "hover:text-secondary-400 active:text-secondary-400", "focus-visible:ring-secondary-500", "disabled:opacity-60 disabled:hover:text-secondary-500 disabled:hover:bg-transparent disabled:active:bg-transparent"),
+		neutral: e("text-neutral-400", "hover:text-neutral-300 active:text-neutral-300", "focus-visible:ring-neutral-400", "disabled:opacity-60 disabled:hover:text-neutral-400 disabled:hover:bg-transparent disabled:active:bg-transparent")
+	}
+}, u = ({ className: n, type: u = "button", color: d = o.PRIMARY, size: f = a.MD, shape: p = r.SQUARE, variant: m = i.SOLID, ...h }) => {
+	let g = s[f], _ = c[p], v = l[m][d];
+	return /* @__PURE__ */ t("button", {
+		type: u,
+		className: e("font-medium whitespace-nowrap select-none", "cursor-pointer disabled:cursor-not-allowed", "transition-colors duration-200 motion-reduce:transition-none", "ring-offset-dark focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", g, _, v, n),
+		...h
+	});
+}, d = ({ className: t, linkComponent: u, color: d = o.PRIMARY, size: f = a.MD, shape: p = r.SQUARE, variant: m = i.SOLID, ...h }) => n(u ?? "a", {
+	className: e("select-none whitespace-nowrap font-medium", "cursor-pointer", "transition-colors duration-200 motion-reduce:transition-none", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ring-offset-dark", s[f], c[p], l[m][d], t),
+	...h
+}), f = ({ className: n, ...r }) => /* @__PURE__ */ t("kbd", {
+	...r,
+	className: e("rounded border border-foreground/20 p-1.5 leading-[50%] shadow-2xl", n)
+});
+//#endregion
+export { u as Button, f as Kbd, d as LinkButton };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/components/ui/Buttons/constants.ts","../src/components/ui/Buttons/themes.ts","../src/components/ui/Buttons/Button/Button.tsx","../src/components/ui/Buttons/LinkButton/LinkButton.tsx","../src/components/ui/Kbd/Kbd.tsx"],"sourcesContent":["export const BUTTON_SHAPE = {\n  SQUARE: 'square',\n  CIRCLE: 'circle',\n} as const;\n\nexport const BUTTON_VARIANT = {\n  SOLID: 'solid',\n  OUTLINED: 'outlined',\n  GHOST: 'ghost',\n  TEXT: 'text',\n} as const;\n\nexport const BUTTON_SIZE = {\n  SM: 'sm',\n  MD: 'md',\n  LG: 'lg',\n} as const;\n\nexport const BUTTON_COLORS = {\n  PRIMARY: 'primary',\n  SECONDARY: 'secondary',\n  NEUTRAL: 'neutral',\n} as const;\n","import type {\n  ButtonColor,\n  ButtonShape,\n  ButtonSize,\n  ButtonVariant,\n} from '@/components/ui/Buttons/types';\n\nimport { cn } from '@nightstem/utils';\n\nexport const THEME_SIZE: Record<ButtonSize, string> = {\n  lg: 'text-lg px-5 py-2.5',\n  md: 'text-base px-4 py-2',\n  sm: 'text-sm px-3 py-1.5',\n} as const;\n\nexport const THEME_SHAPE: Record<ButtonShape, string> = {\n  circle: 'rounded-full',\n  square: 'rounded-md',\n} as const;\n\nexport const THEME_VARIANT: Record<\n  ButtonVariant,\n  Record<ButtonColor, string>\n> = {\n  solid: {\n    primary: cn(\n      'text-dark bg-primary-500',\n      'hover:bg-primary-400 active:bg-primary-400',\n      'focus-visible:ring-primary-500',\n      'disabled:opacity-60 disabled:hover:bg-primary-500 disabled:active:bg-primary-500',\n    ),\n    secondary: cn(\n      'text-dark bg-secondary-500',\n      'hover:bg-secondary-400 active:bg-secondary-400',\n      'focus-visible:ring-secondary-500',\n      'disabled:opacity-60 disabled:hover:bg-secondary-500 disabled:active:bg-secondary-500',\n    ),\n    neutral: cn(\n      'text-dark bg-neutral-400',\n      'hover:bg-neutral-300 active:bg-neutral-300',\n      'focus-visible:ring-neutral-400',\n      'disabled:opacity-60 disabled:hover:bg-neutral-400 disabled:active:bg-neutral-400',\n    ),\n  },\n  outlined: {\n    primary: cn(\n      'text-primary-500 bg-transparent border border-primary-500',\n      'hover:border-primary-400 active:border-primary-400 hover:bg-primary-500/20 active:bg-primary-500/20',\n      'focus-visible:ring-primary-500',\n      'disabled:opacity-60 disabled:hover:border-primary-500 disabled:active:border-primary-500',\n    ),\n    secondary: cn(\n      'text-white bg-transparent border border-secondary-500',\n      'hover:border-secondary-400 active:border-secondary-400 hover:bg-secondary-500/20 active:bg-secondary-500/20',\n      'focus-visible:ring-secondary-500',\n      'disabled:opacity-60 disabled:hover:border-secondary-500 disabled:active:border-secondary-500',\n    ),\n    neutral: cn(\n      'text-neutral-400 bg-transparent border border-neutral-400',\n      'hover:border-neutral-300 active:border-neutral-300 hover:bg-neutral-400/20 active:bg-neutral-400/20',\n      'focus-visible:ring-neutral-400',\n      'disabled:opacity-60 disabled:hover:border-neutral-400 disabled:active:border-neutral-400',\n    ),\n  },\n  ghost: {\n    primary: cn(\n      'text-primary-500 bg-transparent',\n      'hover:text-dark hover:bg-primary-500/60 active:bg-primary-500/60',\n      'focus-visible:ring-primary-500',\n      'disabled:opacity-60 disabled:hover:text-primary-500 disabled:hover:bg-transparent disabled:active:bg-transparent',\n    ),\n    secondary: cn(\n      'text-secondary-500 bg-transparent',\n      'hover:text-dark hover:bg-secondary-500/60 active:bg-secondary-500/60',\n      'focus-visible:ring-secondary-500',\n      'disabled:opacity-60 disabled:hover:text-secondary-500 disabled:hover:bg-transparent disabled:active:bg-transparent',\n    ),\n    neutral: cn(\n      'text-neutral-400 bg-transparent',\n      'hover:text-dark hover:bg-neutral-400/60 active:bg-neutral-400/60',\n      'focus-visible:ring-neutral-400',\n      'disabled:opacity-60 disabled:hover:text-neutral-400 disabled:hover:bg-transparent disabled:active:bg-transparent',\n    ),\n  },\n  text: {\n    primary: cn(\n      'text-primary-500',\n      'hover:text-primary-400 active:text-primary-400',\n      'focus-visible:ring-primary-500',\n      'disabled:opacity-60 disabled:hover:text-primary-500 disabled:hover:bg-transparent disabled:active:bg-transparent',\n    ),\n    secondary: cn(\n      'text-secondary-500',\n      'hover:text-secondary-400 active:text-secondary-400',\n      'focus-visible:ring-secondary-500',\n      'disabled:opacity-60 disabled:hover:text-secondary-500 disabled:hover:bg-transparent disabled:active:bg-transparent',\n    ),\n    neutral: cn(\n      'text-neutral-400',\n      'hover:text-neutral-300 active:text-neutral-300',\n      'focus-visible:ring-neutral-400',\n      'disabled:opacity-60 disabled:hover:text-neutral-400 disabled:hover:bg-transparent disabled:active:bg-transparent',\n    ),\n  },\n} as const;\n","import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';\n\nimport { cn } from '@nightstem/utils';\n\nimport type {\n  ButtonColor,\n  ButtonShape,\n  ButtonSize,\n  ButtonVariant,\n} from '@/components/ui/Buttons/types';\n\nimport {\n  BUTTON_COLORS,\n  BUTTON_SHAPE,\n  BUTTON_SIZE,\n  BUTTON_VARIANT,\n} from '@/components/ui/Buttons/constants';\nimport {\n  THEME_SHAPE,\n  THEME_SIZE,\n  THEME_VARIANT,\n} from '@/components/ui/Buttons/themes';\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> & {\n  size?: ButtonSize;\n  color?: ButtonColor;\n  shape?: ButtonShape;\n  variant?: ButtonVariant;\n};\n\nconst Button = ({\n  className,\n  type = 'button',\n  color = BUTTON_COLORS.PRIMARY,\n  size = BUTTON_SIZE.MD,\n  shape = BUTTON_SHAPE.SQUARE,\n  variant = BUTTON_VARIANT.SOLID,\n  ...props\n}: ButtonProps) => {\n  const sizeClassNames = THEME_SIZE[size];\n  const shapeClassNames = THEME_SHAPE[shape];\n  const colorClassNames = THEME_VARIANT[variant][color];\n\n  return (\n    <button\n      type={type}\n      className={cn(\n        'font-medium whitespace-nowrap select-none',\n        'cursor-pointer disabled:cursor-not-allowed',\n        'transition-colors duration-200 motion-reduce:transition-none',\n        'ring-offset-dark focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',\n        sizeClassNames,\n        shapeClassNames,\n        colorClassNames,\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport default Button;\n","import {\n  createElement,\n  type AnchorHTMLAttributes,\n  type ElementType,\n} from 'react';\n\nimport { cn } from '@nightstem/utils';\n\nimport type {\n  ButtonColor,\n  ButtonShape,\n  ButtonSize,\n  ButtonVariant,\n} from '@/components/ui/Buttons/types';\n\nimport {\n  BUTTON_COLORS,\n  BUTTON_SHAPE,\n  BUTTON_SIZE,\n  BUTTON_VARIANT,\n} from '@/components/ui/Buttons/constants';\nimport {\n  THEME_SHAPE,\n  THEME_SIZE,\n  THEME_VARIANT,\n} from '@/components/ui/Buttons/themes';\n\nexport type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n  /** Element or component used to render the link. Defaults to a plain <a>. Pass next/link, react-router Link, etc. */\n  linkComponent?: ElementType;\n  size?: ButtonSize;\n  color?: ButtonColor;\n  shape?: ButtonShape;\n  variant?: ButtonVariant;\n};\n\nconst LinkButton = ({\n  className,\n  linkComponent,\n  color = BUTTON_COLORS.PRIMARY,\n  size = BUTTON_SIZE.MD,\n  shape = BUTTON_SHAPE.SQUARE,\n  variant = BUTTON_VARIANT.SOLID,\n  ...props\n}: LinkButtonProps) => {\n  const Tag = linkComponent ?? 'a';\n\n  const classNames = cn(\n    'select-none whitespace-nowrap font-medium',\n    'cursor-pointer',\n    'transition-colors duration-200 motion-reduce:transition-none',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ring-offset-dark',\n    THEME_SIZE[size],\n    THEME_SHAPE[shape],\n    THEME_VARIANT[variant][color],\n    className,\n  );\n\n  return createElement(Tag, { className: classNames, ...props });\n};\n\nexport default LinkButton;\n","import type { DetailedHTMLProps, HTMLAttributes } from 'react';\n\nimport { cn } from '@nightstem/utils';\n\nexport type KbdProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLElement>,\n  HTMLElement\n>;\n\nconst Kbd = ({ className, ...props }: KbdProps) => (\n  <kbd\n    {...props}\n    className={cn(\n      'rounded border border-foreground/20 p-1.5 leading-[50%] shadow-2xl',\n      className,\n    )}\n  />\n);\n\nexport default Kbd;\n"],"mappings":";;;;AAAA,IAAa,IAAe;CAC1B,QAAQ;CACR,QAAQ;CACT,EAEY,IAAiB;CAC5B,OAAO;CACP,UAAU;CACV,OAAO;CACP,MAAM;CACP,EAEY,IAAc;CACzB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAgB;CAC3B,SAAS;CACT,WAAW;CACX,SAAS;CACV,ECbY,IAAyC;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAA2C;CACtD,QAAQ;CACR,QAAQ;CACT,EAEY,IAGT;CACF,OAAO;EACL,SAAS,EACP,4BACA,8CACA,kCACA,mFACD;EACD,WAAW,EACT,8BACA,kDACA,oCACA,uFACD;EACD,SAAS,EACP,4BACA,8CACA,kCACA,mFACD;EACF;CACD,UAAU;EACR,SAAS,EACP,6DACA,uGACA,kCACA,2FACD;EACD,WAAW,EACT,yDACA,+GACA,oCACA,+FACD;EACD,SAAS,EACP,6DACA,uGACA,kCACA,2FACD;EACF;CACD,OAAO;EACL,SAAS,EACP,mCACA,oEACA,kCACA,mHACD;EACD,WAAW,EACT,qCACA,wEACA,oCACA,qHACD;EACD,SAAS,EACP,mCACA,oEACA,kCACA,mHACD;EACF;CACD,MAAM;EACJ,SAAS,EACP,oBACA,kDACA,kCACA,mHACD;EACD,WAAW,EACT,sBACA,sDACA,oCACA,qHACD;EACD,SAAS,EACP,oBACA,kDACA,kCACA,mHACD;EACF;CACF,ECvEK,KAAU,EACd,cACA,UAAO,UACP,WAAQ,EAAc,SACtB,UAAO,EAAY,IACnB,WAAQ,EAAa,QACrB,aAAU,EAAe,OACzB,GAAG,QACc;CACjB,IAAM,IAAiB,EAAW,IAC5B,IAAkB,EAAY,IAC9B,IAAkB,EAAc,GAAS;AAE/C,QACE,kBAAC,UAAD;EACQ;EACN,WAAW,EACT,6CACA,8CACA,gEACA,gGACA,GACA,GACA,GACA,EACD;EACD,GAAI;EACJ,CAAA;GCxBA,KAAc,EAClB,cACA,kBACA,WAAQ,EAAc,SACtB,UAAO,EAAY,IACnB,WAAQ,EAAa,QACrB,aAAU,EAAe,OACzB,GAAG,QAeI,EAbK,KAAiB,KAaH;CAAE,WAXT,EACjB,6CACA,kBACA,gEACA,gGACA,EAAW,IACX,EAAY,IACZ,EAAc,GAAS,IACvB,EAGqC;CAAY,GAAG;CAAO,CAAC,ECjD1D,KAAO,EAAE,cAAW,GAAG,QAC3B,kBAAC,OAAD;CACE,GAAI;CACJ,WAAW,EACT,sEACA,EACD;CACD,CAAA"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@nightstem/ui",
-  "version": "0.0.2-alpha.1",
+  "version": "1.0.0",
   "description": "React UI components for the Nightstem design system",
   "license": "MIT",
   "type": "module",
+  "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -12,8 +13,8 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -25,7 +26,15 @@
     "access": "public"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "rimraf dist && vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage --passWithNoTests",
+    "lint": "eslint .",
+    "format": "prettier --write . --ignore-unknown",
+    "format:check": "prettier --check . --ignore-unknown",
+    "storybook": "pnpm --filter @nightstem/storybook storybook",
     "clean": "rimraf dist"
   },
   "peerDependencies": {
@@ -33,11 +42,18 @@
     "react-dom": "^19.2.5"
   },
   "dependencies": {
-    "@nightstem/tokens": "workspace:*"
+    "@nightstem/tokens": "workspace:*",
+    "@nightstem/utils": "workspace:*"
   },
   "devDependencies": {
+    "@storybook/react": "^10.3.6",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "rimraf": "^6.0.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10"
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^5.0.0",
+    "vitest-axe": "1.0.0-pre.5"
   }
 }