@steez-ui/ui 0.1.0

package/dist/components/ThemeToggle.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { MoonIcon, SunIcon } from "@steez-ui/icons";
+import styles from "./ThemeToggle.module.css";
+export function ThemeToggle({ storageKey = "theme", defaultTheme = "dark", className = "", onThemeChange, }) {
+    const [theme, setTheme] = useState(defaultTheme);
+    useEffect(() => {
+        const savedTheme = window.localStorage.getItem(storageKey);
+        const initialTheme = savedTheme || defaultTheme;
+        setTheme(initialTheme);
+        document.documentElement.setAttribute("data-theme", initialTheme);
+    }, [defaultTheme, storageKey]);
+    const toggleTheme = () => {
+        const newTheme = theme === "dark" ? "light" : "dark";
+        setTheme(newTheme);
+        window.localStorage.setItem(storageKey, newTheme);
+        document.documentElement.setAttribute("data-theme", newTheme);
+        onThemeChange?.(newTheme);
+    };
+    return (_jsx("button", { type: "button", className: `${styles.themeToggle} ${styles.iconButton} ${className}`.trim(), onClick: toggleTheme, "aria-label": `Switch to ${theme === "dark" ? "light" : "dark"} mode`, title: `Switch to ${theme === "dark" ? "light" : "dark"} mode`, children: theme === "dark" ? _jsx(SunIcon, { width: 14, height: 14 }) : _jsx(MoonIcon, { width: 14, height: 14 }) }));
+}
+//# sourceMappingURL=ThemeToggle.js.map

package/dist/components/ThemeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.js","sourceRoot":"","sources":["../../src/components/ThemeToggle.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAS9C,MAAM,UAAU,WAAW,CAAC,EAC1B,UAAU,GAAG,OAAO,EACpB,YAAY,GAAG,MAAM,EACrB,SAAS,GAAG,EAAE,EACd,aAAa,GACI;IACjB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAmB,YAAY,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAA4B,CAAC;QACtF,MAAM,YAAY,GAAG,UAAU,IAAI,YAAY,CAAC;QAChD,QAAQ,CAAC,YAAY,CAAC,CAAC;QACvB,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/B,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,QAAQ,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;QACrD,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAClD,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC9D,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,UAAU,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,EAC3E,OAAO,EAAE,WAAW,gBACR,aAAa,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,OAAO,EACnE,KAAK,EAAE,aAAa,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,OAAO,YAE7D,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GACrF,CACV,CAAC;AACJ,CAAC"}

package/dist/components/ThemeToggle.module.css

@@ -0,0 +1,23 @@
+.themeToggle {
+  border: 1px solid var(--border-color);
+  background: color-mix(in srgb, var(--bg-secondary) 85%, transparent);
+  color: var(--text-primary);
+  border-radius: 999px;
+  padding: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.themeToggle:hover {
+  border-color: var(--interactive-secondary-border-hover);
+  background: var(--interactive-secondary-bg-hover);
+}
+
+.iconButton {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+

package/dist/components/ThemedCard.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ThemedCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode;
+    variant?: "default" | "featured";
+}
+export declare function ThemedCard({ title, variant, className, children, ...props }: ThemedCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemedCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedCard.d.ts","sourceRoot":"","sources":["../../src/components/ThemedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CAClC;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAmB,EACnB,SAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,2CAOjB"}

package/dist/components/ThemedCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./ThemedCard.module.css";
+export function ThemedCard({ title, variant = "default", className = "", children, ...props }) {
+    return (_jsxs("div", { className: `${styles.card} ${variant === "featured" ? styles.featured : ""} ${className}`.trim(), ...props, children: [title ? _jsx("div", { className: styles.title, children: title }) : null, children] }));
+}
+//# sourceMappingURL=ThemedCard.js.map

package/dist/components/ThemedCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedCard.js","sourceRoot":"","sources":["../../src/components/ThemedCard.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAQ7C,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,KAAM,KAAK,aAC7G,KAAK,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAO,CAAC,CAAC,CAAC,IAAI,EAC1D,QAAQ,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/ThemedCard.module.css

@@ -0,0 +1,22 @@
+.card {
+  position: relative;
+  border: 1px solid var(--border-color);
+  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
+  border-radius: 14px;
+  padding: 1rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.featured {
+  border-color: var(--accent-primary);
+  box-shadow: var(--shadow-md);
+}
+
+.title {
+  margin-bottom: 0.75rem;
+  color: var(--text-primary);
+  font-family: var(--font-primary);
+  font-size: 1rem;
+  font-weight: 600;
+}
+

package/dist/hooks/useStableId.d.ts

@@ -0,0 +1,2 @@
+export declare function useStableId(prefix: string, explicitId?: string): string;
+//# sourceMappingURL=useStableId.d.ts.map

package/dist/hooks/useStableId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStableId.d.ts","sourceRoot":"","sources":["../../src/hooks/useStableId.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAGvE"}

package/dist/hooks/useStableId.js

@@ -0,0 +1,6 @@
+import { useId } from "react";
+export function useStableId(prefix, explicitId) {
+    const reactId = useId().replace(/:/g, "");
+    return explicitId || `${prefix}-${reactId}`;
+}
+//# sourceMappingURL=useStableId.js.map

package/dist/hooks/useStableId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStableId.js","sourceRoot":"","sources":["../../src/hooks/useStableId.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,MAAM,UAAU,WAAW,CAAC,MAAc,EAAE,UAAmB;IAC7D,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAC1C,OAAO,UAAU,IAAI,GAAG,MAAM,IAAI,OAAO,EAAE,CAAC;AAC9C,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+export { Button, type ButtonProps } from "./components/Button";
+export { CopyButton, type CopyButtonProps } from "./components/CopyButton";
+export { CyberpunkCheckbox, type CyberpunkCheckboxProps } from "./components/CyberpunkCheckbox";
+export { CyberpunkInput, type CyberpunkInputProps, } from "./components/CyberpunkInput";
+export { CyberpunkRadio, CyberpunkRadioGroup, type CyberpunkRadioGroupProps, type CyberpunkRadioProps, } from "./components/CyberpunkRadio";
+export { CyberpunkSelect, type CyberpunkSelectOption, type CyberpunkSelectProps, } from "./components/CyberpunkSelect";
+export { CyberpunkSlider, type CyberpunkSliderProps, } from "./components/CyberpunkSlider";
+export { CyberpunkTextarea, type CyberpunkTextareaProps, } from "./components/CyberpunkTextarea";
+export { CyberpunkTile, type CyberpunkTileProps } from "./components/CyberpunkTile";
+export { CornerBracketCard, type CornerBracketCardProps } from "./components/CornerBracketCard";
+export { ErrorMessage, type ErrorMessageProps } from "./components/ErrorMessage";
+export { LOADING_PROGRESS_SEGMENT_COUNT, LoadingProgressBar, type LoadingProgressBarProps, } from "./components/LoadingProgressBar";
+export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
+export { PageTemplate, type PageTemplateProps } from "./components/PageTemplate";
+export { SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, } from "./components/SegmentedControl";
+export { StatusMessage, type StatusMessageProps } from "./components/StatusMessage";
+export { TabbedPanel, type TabbedPanelProps, type TabbedPanelTab } from "./components/TabbedPanel";
+export { ThemedCard, type ThemedCardProps } from "./components/ThemedCard";
+export { ThemeToggle, type ThemeToggleProps } from "./components/ThemeToggle";
+//# 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,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAChG,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,GACzB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EACL,gBAAgB,EAChB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACnG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,20 @@
+export { Button } from "./components/Button";
+export { CopyButton } from "./components/CopyButton";
+export { CyberpunkCheckbox } from "./components/CyberpunkCheckbox";
+export { CyberpunkInput, } from "./components/CyberpunkInput";
+export { CyberpunkRadio, CyberpunkRadioGroup, } from "./components/CyberpunkRadio";
+export { CyberpunkSelect, } from "./components/CyberpunkSelect";
+export { CyberpunkSlider, } from "./components/CyberpunkSlider";
+export { CyberpunkTextarea, } from "./components/CyberpunkTextarea";
+export { CyberpunkTile } from "./components/CyberpunkTile";
+export { CornerBracketCard } from "./components/CornerBracketCard";
+export { ErrorMessage } from "./components/ErrorMessage";
+export { LOADING_PROGRESS_SEGMENT_COUNT, LoadingProgressBar, } from "./components/LoadingProgressBar";
+export { PageHeader } from "./components/PageHeader";
+export { PageTemplate } from "./components/PageTemplate";
+export { SegmentedControl, } from "./components/SegmentedControl";
+export { StatusMessage } from "./components/StatusMessage";
+export { TabbedPanel } from "./components/TabbedPanel";
+export { ThemedCard } from "./components/ThemedCard";
+export { ThemeToggle } from "./components/ThemeToggle";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAwB,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gCAAgC,CAAC;AAChG,OAAO,EACL,cAAc,GAEf,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,cAAc,EACd,mBAAmB,GAGpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,eAAe,GAGhB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,eAAe,GAEhB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,iBAAiB,GAElB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,aAAa,EAA2B,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gCAAgC,CAAC;AAChG,OAAO,EAAE,YAAY,EAA0B,MAAM,2BAA2B,CAAC;AACjF,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,GAEnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,UAAU,EAAwB,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAA0B,MAAM,2BAA2B,CAAC;AACjF,OAAO,EACL,gBAAgB,GAGjB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,aAAa,EAA2B,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,WAAW,EAA8C,MAAM,0BAA0B,CAAC;AACnG,OAAO,EAAE,UAAU,EAAwB,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAyB,MAAM,0BAA0B,CAAC"}

package/dist/styles/Buttons.module.css

@@ -0,0 +1,96 @@
+.primary {
+  padding: 8px 16px;
+  background: var(--interactive-primary-bg);
+  color: var(--interactive-primary-fg);
+  border: 1px solid var(--interactive-primary-border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.primary:hover:not(:disabled) {
+  background: var(--interactive-primary-bg-hover);
+  border-color: var(--interactive-primary-border);
+}
+
+.secondary {
+  padding: 8px 16px;
+  background: var(--interactive-secondary-bg);
+  color: var(--interactive-secondary-fg);
+  border: 1px solid var(--interactive-secondary-border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.secondary:hover:not(:disabled) {
+  color: var(--interactive-secondary-fg);
+  background: var(--interactive-secondary-bg-hover);
+  border-color: var(--interactive-secondary-border-hover);
+}
+
+.toolbarButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--interactive-secondary-bg);
+  color: var(--interactive-secondary-fg);
+  border: 1px solid var(--interactive-secondary-border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.toolbarButton:hover:not(:disabled) {
+  background: var(--interactive-primary-bg);
+  border-color: var(--interactive-primary-border);
+  color: var(--interactive-primary-fg);
+}
+
+.danger {
+  padding: 8px 16px;
+  background: var(--danger-bg);
+  color: var(--danger);
+  border: 1px solid var(--danger);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.danger:hover:not(:disabled) {
+  background: var(--danger);
+  color: var(--text-on-accent);
+}
+
+.small {
+  padding: 4px 10px;
+  font-size: 0.75rem;
+}
+
+.large {
+  padding: 12px 24px;
+  font-size: 1rem;
+}
+
+.primary:disabled,
+.secondary:disabled,
+.toolbarButton:disabled,
+.danger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@steez-ui/ui",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@steez-ui/icons": "^0.1.0",
+    "@steez-ui/theme": "^0.1.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles/Buttons.module.css": "./dist/styles/Buttons.module.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thomasjvu/steez-ui.git"
+  },
+  "homepage": "https://steez-ui.pages.dev",
+  "bugs": {
+    "url": "https://github.com/thomasjvu/steez-ui/issues"
+  }
+}