dawn-ui-react 1.0.0-alpha.9 → 1.0.0-beta.2

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useMediaQuery } from './use-media-query';
+export * from './theme';

package/dist/hooks/theme/constants.d.ts

@@ -0,0 +1,4 @@
+import { Theme, ThemeValue } from './types';
+export declare const THEME_STORAGE_KEY = "dawn-ui-theme";
+export declare const DEFAULT_THEME: ThemeValue;
+export declare const getThemeByValue: (value: ThemeValue, themes: Theme[]) => Theme | undefined;

package/dist/hooks/theme/index.d.ts

@@ -0,0 +1,3 @@
+export type { Theme, ThemeValue, ThemeProviderProps, ThemeProviderState } from './types';
+export { getThemeByValue, THEME_STORAGE_KEY, DEFAULT_THEME } from './constants';
+export { ThemeProvider, useTheme } from './use-theme';

package/dist/hooks/theme/types.d.ts

@@ -0,0 +1,16 @@
+import { Icon } from '@phosphor-icons/react';
+export type ThemeValue = 'light' | 'dark' | 'system';
+export type Theme = {
+    value: ThemeValue;
+    label: string;
+    icon: Icon;
+};
+export type ThemeProviderState = {
+    theme: ThemeValue;
+    setTheme: (theme: ThemeValue) => void;
+};
+export type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: ThemeValue;
+    storageKey?: string;
+};

package/dist/hooks/theme/use-theme.d.ts

@@ -0,0 +1,3 @@
+import { ThemeProviderProps, ThemeProviderState } from './types';
+export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): import("react").JSX.Element;
+export declare const useTheme: () => ThemeProviderState;

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,6 @@
+type Device = {
+    name: 'mobile' | 'tablet' | 'desktop';
+    query: string;
+};
+export declare const useMediaQuery: (deviceName: Device["name"]) => boolean;
+export {};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './hooks';
 export { cn } from './utils/cn';

package/dist/styles.css

@@ -5,6 +5,8 @@
 
 @theme static {
   --color-*: initial;
+  --color-white: var(--dawn-white);
+  --color-black: var(--dawn-black);
   --color-brand-default: var(--dawn-brand-default);
   --color-brand-muted: var(--dawn-brand-muted);
   --color-brand-subtle: var(--dawn-brand-subtle);
@@ -405,6 +407,8 @@
   --yellow-900: #715212ff;
   --yellow-950: #422f06ff;
 
+  --dawn-white: var(--white);
+  --dawn-black: var(--black);
   --dawn-brand-default: light-dark(var(--rose-600), var(--rose-300));
   --dawn-brand-muted: light-dark(var(--rose-700), var(--rose-200));
   --dawn-brand-subtle: light-dark(var(--rose-100), var(--rose-950));
@@ -539,13 +543,13 @@
   --dawn-spacing-2xl-3xl: clamp(3rem, 1.7727rem + 5.4545vw, 6rem);
   --dawn-spacing-sm-lg: clamp(0.75rem, 0.2386rem + 2.2727vw, 2rem);
 
-  --dawn-blur-2xs: blur(4px);
-  --dawn-blur-xs: blur(8px);
-  --dawn-blur-sm: blur(12px);
-  --dawn-blur-md: blur(16px);
-  --dawn-blur-lg: blur(20px);
-  --dawn-blur-xl: blur(24px);
-  --dawn-blur-2xl: blur(32px);
+  --dawn-blur-2xs: 4px;
+  --dawn-blur-xs: 8px;
+  --dawn-blur-sm: 12px;
+  --dawn-blur-md: 16px;
+  --dawn-blur-lg: 20px;
+  --dawn-blur-xl: 24px;
+  --dawn-blur-2xl: 32px;
 
   --dawn-shadow-2xs: 0px 1px 2px;
   --dawn-shadow-xs: 0px 2px 4px;
@@ -597,13 +601,47 @@
 }
 
 @layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  html,
+  body,
+  #app {
+    min-height: 100%;
+    height: 100%;
+  }
+
   body {
     background-color: theme(--color-surface-background);
     color: theme(--color-on-surface);
     font-family: var(--font-body);
     font-size: var(--text-base);
+    margin: 0;
     scrollbar-color: theme(--color-accent-default) theme(--color-surface-2);
   }
+
+  button {
+    line-height: 0;
+  }
+
+  input {
+    line-height: 0;
+  }
+
+  .recharts-wrapper:focus,
+  .recharts-wrapper *:focus {
+    outline: none;
+  }
+
+  .recharts-wrapper:focus-visible,
+  .recharts-wrapper *:focus-visible {
+    outline: revert;
+  }
+
+  #app > div[style*='--drawer-swipe-progress'] {
+    height: 100%;
+  }
 }
 
 @utility shadow-* {

package/package.json

@@ -1,6 +1,22 @@
 {
   "name": "dawn-ui-react",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-beta.2",
+  "description": "A React component library for building polished product interfaces with composable primitives and Tailwind CSS styling.",
+  "keywords": [
+    "accessible-ui",
+    "component-library",
+    "components",
+    "design-system",
+    "react",
+    "storybook",
+    "tailwindcss",
+    "typescript",
+    "ui"
+  ],
+  "homepage": "https://github.com/PHNTMbandit/dawn-ui-react#readme",
+  "bugs": {
+    "url": "https://github.com/PHNTMbandit/dawn-ui-react/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,6 +48,7 @@
     "build-storybook": "pnpm build:tailwind && storybook build",
     "build:css": "node -e \"require('fs').copyFileSync('src/styles/input.css', 'dist/styles.css')\"",
     "build:tailwind": "pnpm dlx @tailwindcss/cli -i ./src/styles/input.css -o ./dist/styles.css",
+    "chromatic": "chromatic --project-token chpt_cb6fae2c2ef2566",
     "commit": "git add . && git commit",
     "commit:skip": "git add . && git commit --no-verify",
     "cz": "cz",
@@ -47,70 +64,75 @@
     "watch:tailwind": "pnpm dlx @tailwindcss/cli -i ./src/styles/input.css -o ./src/styles/output.css --watch"
   },
   "dependencies": {
-    "@base-ui/react": "^1.4.1",
-    "@dnd-kit/dom": "^0.4.0",
-    "@dnd-kit/react": "^0.4.0",
+    "@base-ui/react": "^1.7.0",
+    "@dnd-kit/dom": "^0.5.0",
+    "@dnd-kit/react": "^0.5.0",
     "@phosphor-icons/react": "^2.1.10",
-    "@tailwindcss/cli": "^4.3.0",
-    "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/react-form": "^1.32.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-form": "^1.33.5",
+    "@tanstack/react-table": "^9.2.3",
+    "chroma-js": "^3.2.0",
+    "chromatic": "^18.6.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "react-resizable-panels": "^4.11.1",
+    "react-resizable-panels": "^4.12.3",
+    "recharts": "^3.10.1",
     "tailwind-merge": "^3.6.0",
-    "tailwindcss": "^4.3.0",
+    "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.2.1",
-    "@commitlint/cli": "^21.0.1",
-    "@commitlint/config-conventional": "^21.0.1",
-    "@faker-js/faker": "^10.4.0",
-    "@semantic-release/changelog": "^6.0.3",
+    "@chromatic-com/storybook": "^5.3.0",
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
+    "@faker-js/faker": "^10.6.0",
+    "@semantic-release/changelog": "^7.0.0",
     "@semantic-release/commit-analyzer": "^13.0.1",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^12.0.8",
+    "@semantic-release/git": "^11.0.1",
+    "@semantic-release/github": "^12.0.9",
     "@semantic-release/npm": "^13.1.5",
     "@semantic-release/release-notes-generator": "^14.1.1",
-    "@storybook/addon-a11y": "^10.4.0",
-    "@storybook/addon-docs": "^10.4.0",
-    "@storybook/addon-themes": "^10.4.0",
-    "@storybook/addon-vitest": "^10.4.0",
-    "@storybook/react-vite": "^10.4.0",
-    "@tailwindcss/node": "^4.3.0",
-    "@types/node": "^25.8.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/browser-playwright": "^4.1.6",
-    "@vitest/coverage-v8": "^4.1.6",
-    "commitizen": "^4.3.1",
-    "concurrently": "^9.2.1",
+    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-themes": "^10.5.10",
+    "@storybook/addon-vitest": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
+    "@tailwindcss/node": "^4.3.3",
+    "@tanstack/react-virtual": "^3.14.10",
+    "@types/chroma-js": "^3.1.2",
+    "@types/node": "^26.4.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@typescript/typescript6": "^6.0.2",
+    "@vitejs/plugin-react": "^6.1.0",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "commitizen": "^4.3.2",
+    "concurrently": "^10.0.5",
     "cz-conventional-changelog": "^3.3.0",
-    "globals": "^17.6.0",
-    "jsdom": "^29.1.1",
-    "lefthook": "^2.1.6",
-    "lint-staged": "^17.0.4",
-    "oxfmt": "^0.50.0",
-    "oxlint": "^1.65.0",
-    "oxlint-tailwindcss": "^0.7.1",
-    "oxlint-tsgolint": "^0.22.1",
-    "playwright": "^1.60.0",
-    "semantic-release": "^25.0.3",
-    "shiki": "^4.1.0",
-    "storybook": "^10.4.0",
-    "typescript": "~6.0.3",
-    "uuid": "^14.0.0",
-    "vite": "^8.0.13",
-    "vite-plugin-dts": "^5.0.0",
-    "vitest": "^4.1.6",
+    "globals": "^17.11.0",
+    "jsdom": "^30.0.1",
+    "lefthook": "^2.1.10",
+    "lint-staged": "^17.4.1",
+    "oxfmt": "^0.65.0",
+    "oxlint": "^1.80.0",
+    "oxlint-tailwindcss": "^1.10.0",
+    "oxlint-tsgolint": "^7.0.2001",
+    "playwright": "^1.62.1",
+    "semantic-release": "^25.0.9",
+    "shiki": "^4.4.3",
+    "storybook": "^10.5.10",
+    "typescript": "~7.0.2",
+    "uuid": "^14.0.2",
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.11",
     "zod": "^4.4.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "use-sync-external-store": "^1.2.0"
+    "react-dom": "^19.0.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,mjs,cjs}": "pnpm run lint",

package/dist/Input-kWMjBJ1G.js

@@ -1,76 +0,0 @@
-import { V as e, X as t, Z as n } from "./form-context-D_CUI37x.js";
-import { F as r, K as i, c as a, i as o, n as s, o as c, p as l, r as u, s as d, t as f } from "./useLabelableId-Cu8szM6L.js";
-import * as p from "react";
-import { jsx as m } from "react/jsx-runtime";
-//#region node_modules/.pnpm/@base-ui+react@1.4.1_@types+react@19.2.14_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@base-ui/react/esm/field/control/FieldControl.js
-var h = /* @__PURE__ */ p.forwardRef(function(m, h) {
-	let { render: g, className: _, id: v, name: y, value: b, disabled: x = !1, onValueChange: S, defaultValue: C, autoFocus: w = !1, style: T, ...E } = m, { state: D, name: O, disabled: k, setTouched: A, setDirty: j, validityData: M, setFocused: N, setFilled: P, validationMode: F, validation: I } = o(), L = k || x, R = O ?? y, z = {
-		...D,
-		disabled: L
-	}, { labelId: B } = s(), V = f({ id: v });
-	t(() => {
-		let e = b != null;
-		I.inputRef.current?.value || e && b !== "" ? P(!0) : e && b === "" && P(!1);
-	}, [
-		I.inputRef,
-		P,
-		b
-	]);
-	let H = p.useRef(null);
-	t(() => {
-		w && H.current === a(d(H.current)) && N(!0);
-	}, [w, N]);
-	let [U] = i({
-		controlled: b,
-		default: C,
-		name: "FieldControl",
-		state: "value"
-	}), W = b !== void 0, G = W ? U : void 0, K = n(() => I.inputRef.current?.value);
-	return u(I.inputRef, {
-		id: V,
-		value: G,
-		getValue: K
-	}), e("input", m, {
-		ref: [h, H],
-		state: z,
-		props: [
-			{
-				id: V,
-				disabled: L,
-				name: R,
-				ref: I.inputRef,
-				"aria-labelledby": B,
-				autoFocus: w,
-				...W ? { value: G } : { defaultValue: C },
-				onChange(e) {
-					let t = e.currentTarget.value;
-					S?.(t, l(r, e.nativeEvent)), j(t !== M.initialValue), P(t !== "");
-				},
-				onFocus() {
-					N(!0);
-				},
-				onBlur(e) {
-					A(!0), N(!1), F === "onBlur" && I.commit(e.currentTarget.value);
-				},
-				onKeyDown(e) {
-					e.currentTarget.tagName === "INPUT" && e.key === "Enter" && (A(!0), I.commit(e.currentTarget.value));
-				}
-			},
-			I.getInputValidationProps(),
-			E
-		],
-		stateAttributesMapping: c
-	});
-});
-process.env.NODE_ENV !== "production" && (h.displayName = "FieldControl");
-//#endregion
-//#region node_modules/.pnpm/@base-ui+react@1.4.1_@types+react@19.2.14_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@base-ui/react/esm/input/Input.js
-var g = /* @__PURE__ */ p.forwardRef(function(e, t) {
-	return /* @__PURE__ */ m(h, {
-		ref: t,
-		...e
-	});
-});
-process.env.NODE_ENV !== "production" && (g.displayName = "Input");
-//#endregion
-export { g as t };