@steez-ui/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Thomas Vu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# Steez UI
+
+Shared Phantasy UI primitives and shadcn-compatible registry output.
+
+Registry frontend: `https://steez-ui.pages.dev`
+
+## Packages
+
+- `@steez-ui/theme`
+- `@steez-ui/icons`
+- `@steez-ui/ui`
+
+## App
+
+- `@steez-ui/registry`
+
+## Scripts
+
+- `bun run build`
+- `bun run check:release`
+- `bun run publish:packages:dry-run`
+- `bun run publish:packages`
+- `bun run deploy:registry`
+- `bun run generate:registry`
+- `bun run test`
+- `bun run test:install-smoke`
+
+## Install
+
+```bash
+bunx shadcn@latest add https://steez-ui.pages.dev/r/foundation.json
+```
+
+```bash
+bun add @steez-ui/theme @steez-ui/icons @steez-ui/ui
+```
+
+## Release Flow
+
+1. `bun install`
+2. `bun run check:release`
+3. `bun run publish:packages`
+4. `bun run deploy:registry`
+
+GitHub Actions mirror the same path for CI, npm publish, and Cloudflare Pages deployment.
+
+## One-Time External Setup
+
+- Create or claim the npm scope `@steez-ui`, then grant the publishing account access.
+- Add `NPM_TOKEN` to the GitHub repository secrets before using the package publish workflow.
+- Add `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID` to the GitHub repository secrets before relying on the Pages deploy workflow.
+- Until those secrets exist, the GitHub publish and deploy workflows will skip with a notice instead of failing.

package/dist/components/Button.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type ButtonVariant = "primary" | "secondary" | "danger";
+type ButtonSize = "small" | "medium" | "large";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+}
+export declare function Button({ variant, size, className, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AACxD,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAe,EACf,SAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAQb;AAED,eAAe,MAAM,CAAC"}

package/dist/components/Button.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "../styles/Buttons.module.css";
+export function Button({ variant = "primary", size = "medium", className = "", children, ...props }) {
+    const sizeClass = size === "small" ? styles.small : size === "large" ? styles.large : "";
+    return (_jsx("button", { className: `${styles[variant]} ${sizeClass} ${className}`.trim(), ...props, children: children }));
+}
+export default Button;
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAYlD,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,GAAG,KAAK,EACI;IACZ,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzF,OAAO,CACL,iBAAQ,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,SAAS,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,KAAM,KAAK,YAChF,QAAQ,GACF,CACV,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}

package/dist/components/CopyButton.d.ts

@@ -0,0 +1,10 @@
+export interface CopyButtonProps {
+    value: string;
+    size?: number;
+    className?: string;
+    title?: string;
+    feedbackDuration?: number;
+    onCopyError?: (error: unknown) => void;
+}
+export declare function CopyButton({ value, size, className, title, feedbackDuration, onCopyError, }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CopyButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../src/components/CopyButton.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAS,EACT,SAAc,EACd,KAA2B,EAC3B,gBAAuB,EACvB,WAAW,GACZ,EAAE,eAAe,2CAgCjB"}

package/dist/components/CopyButton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { CheckIcon, CopyIcon } from "@steez-ui/icons";
+import styles from "./CopyButton.module.css";
+export function CopyButton({ value, size = 16, className = "", title = "Copy to clipboard", feedbackDuration = 2000, onCopyError, }) {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!copied) {
+            return undefined;
+        }
+        const timer = window.setTimeout(() => setCopied(false), feedbackDuration);
+        return () => window.clearTimeout(timer);
+    }, [copied, feedbackDuration]);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+        }
+        catch (error) {
+            onCopyError?.(error);
+        }
+    };
+    return (_jsx("button", { type: "button", className: `${styles.copyButton} ${copied ? styles.copied : ""} ${className}`.trim(), onClick: handleCopy, title: copied ? "Copied!" : title, "aria-label": copied ? "Copied to clipboard" : title, children: copied ? _jsx(CheckIcon, { width: size, height: size }) : _jsx(CopyIcon, { width: size, height: size }) }));
+}
+//# sourceMappingURL=CopyButton.js.map

package/dist/components/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../src/components/CopyButton.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAW7C,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,mBAAmB,EAC3B,gBAAgB,GAAG,IAAI,EACvB,WAAW,GACK;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAC1E,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE;QAC5B,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YAC3C,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,EACpF,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,gBACrB,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAK,YAEjD,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,GAAI,GACrF,CACV,CAAC;AACJ,CAAC"}

package/dist/components/CopyButton.module.css

@@ -0,0 +1,30 @@
+.copyButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: all var(--transition-fast);
+  min-width: 32px;
+  min-height: 24px;
+}
+
+.copyButton:hover:not(:disabled) {
+  border-color: var(--progress);
+  color: var(--progress);
+}
+
+.copyButton:active {
+  transform: scale(0.95);
+}
+
+.copied {
+  border-color: var(--success);
+  color: var(--success);
+}
+

package/dist/components/CornerBracketCard.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CornerBracketCard.d.ts","sourceRoot":"","sources":["../../src/components/CornerBracketCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,sBACf,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,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAmB,EACnB,SAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAWxB"}

package/dist/components/CornerBracketCard.js

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

package/dist/components/CornerBracketCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CornerBracketCard.js","sourceRoot":"","sources":["../../src/components/CornerBracketCard.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAQpD,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,GAAG,KAAK,EACe;IACvB,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,aAC9G,eAAM,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,EAAE,iBAAc,MAAM,GAAG,EAClF,eAAM,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,cAAc,EAAE,iBAAc,MAAM,GAAG,EACnF,eAAM,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,gBAAgB,EAAE,iBAAc,MAAM,GAAG,EACrF,eAAM,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,iBAAiB,EAAE,iBAAc,MAAM,GAAG,EACrF,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/CornerBracketCard.module.css

@@ -0,0 +1,109 @@
+.card {
+  position: relative;
+  border: 1px solid var(--border-color);
+  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
+  padding: 1rem;
+}
+
+.featured {
+  border-color: var(--accent-primary);
+}
+
+.title {
+  margin-bottom: 0.75rem;
+  color: var(--text-primary);
+  font-family: var(--font-primary);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.corner {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  pointer-events: none;
+}
+
+.corner::before,
+.corner::after {
+  content: "";
+  position: absolute;
+  background: var(--accent-primary);
+}
+
+.cornerTopLeft {
+  top: -1px;
+  left: -1px;
+}
+
+.cornerTopLeft::before,
+.cornerBottomLeft::before,
+.cornerTopRight::before,
+.cornerBottomRight::before {
+  width: 12px;
+  height: 1px;
+}
+
+.cornerTopLeft::after,
+.cornerBottomLeft::after,
+.cornerTopRight::after,
+.cornerBottomRight::after {
+  width: 1px;
+  height: 12px;
+}
+
+.cornerTopLeft::before {
+  top: 0;
+  left: 0;
+}
+
+.cornerTopLeft::after {
+  top: 0;
+  left: 0;
+}
+
+.cornerTopRight {
+  top: -1px;
+  right: -1px;
+}
+
+.cornerTopRight::before {
+  top: 0;
+  right: 0;
+}
+
+.cornerTopRight::after {
+  top: 0;
+  right: 0;
+}
+
+.cornerBottomLeft {
+  bottom: -1px;
+  left: -1px;
+}
+
+.cornerBottomLeft::before {
+  bottom: 0;
+  left: 0;
+}
+
+.cornerBottomLeft::after {
+  bottom: 0;
+  left: 0;
+}
+
+.cornerBottomRight {
+  bottom: -1px;
+  right: -1px;
+}
+
+.cornerBottomRight::before {
+  bottom: 0;
+  right: 0;
+}
+
+.cornerBottomRight::after {
+  bottom: 0;
+  right: 0;
+}
+

package/dist/components/CyberpunkCheckbox.d.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "react";
+export interface CyberpunkCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type"> {
+    label?: string;
+    onChange?: (checked: boolean) => void;
+}
+export declare function CyberpunkCheckbox({ label, className, id, onChange, ...props }: CyberpunkCheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CyberpunkCheckbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkCheckbox.d.ts","sourceRoot":"","sources":["../../src/components/CyberpunkCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAc,EACd,EAAE,EACF,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAexB"}

package/dist/components/CyberpunkCheckbox.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStableId } from "../hooks/useStableId";
+import styles from "./CyberpunkCheckbox.module.css";
+export function CyberpunkCheckbox({ label, className = "", id, onChange, ...props }) {
+    const inputId = useStableId("checkbox", id);
+    return (_jsxs("label", { htmlFor: inputId, className: `${styles.wrapper} ${className}`.trim(), children: [_jsx("input", { id: inputId, type: "checkbox", className: styles.checkbox, onChange: (event) => onChange?.(event.target.checked), ...props }), label ? _jsx("span", { className: styles.label, children: label }) : null] }));
+}
+//# sourceMappingURL=CyberpunkCheckbox.js.map

package/dist/components/CyberpunkCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkCheckbox.js","sourceRoot":"","sources":["../../src/components/CyberpunkCheckbox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAQpD,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,GAAG,EAAE,EACd,EAAE,EACF,QAAQ,EACR,GAAG,KAAK,EACe;IACvB,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAE5C,OAAO,CACL,iBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aACzE,gBACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KACjD,KAAK,GACT,EACD,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,IACvD,CACT,CAAC;AACJ,CAAC"}

package/dist/components/CyberpunkCheckbox.module.css

@@ -0,0 +1,57 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox {
+  width: 28px;
+  height: 28px;
+  border: 2px solid var(--border);
+  border-radius: 3px;
+  appearance: none;
+  outline: none;
+  margin: 0;
+  cursor: pointer;
+  position: relative;
+  background-color: var(--bg-primary);
+  transition: all var(--transition-fast);
+}
+
+.checkbox::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  background-color: var(--success);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  display: block;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+}
+
+.checkbox:checked::before {
+  transform: scale(1);
+}
+
+.checkbox:hover {
+  border-color: var(--success);
+}
+
+.checkbox:focus-visible {
+  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
+}
+
+.checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.label {
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+

package/dist/components/CyberpunkInput.d.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+export interface CyberpunkInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "helperText"> {
+    label?: string;
+    variant?: "default" | "long" | "full";
+    helperText?: string;
+    icon?: ReactNode;
+}
+export declare function CyberpunkInput({ label, variant, className, id, disabled, readOnly, helperText, icon, ...props }: CyberpunkInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CyberpunkInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkInput.d.ts","sourceRoot":"","sources":["../../src/components/CyberpunkInput.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAmB,EACnB,SAAc,EACd,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAoBrB"}

package/dist/components/CyberpunkInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStableId } from "../hooks/useStableId";
+import styles from "./CyberpunkInput.module.css";
+export function CyberpunkInput({ label, variant = "default", className = "", id, disabled, readOnly, helperText, icon, ...props }) {
+    const inputId = useStableId("input", id);
+    const isDisabledOrReadOnly = disabled || readOnly;
+    return (_jsxs("div", { className: `${styles.cyberInput} ${styles[variant]} ${className}`.trim(), children: [label ? (_jsx("label", { htmlFor: inputId, className: styles.label, children: label })) : null, _jsxs("div", { className: `${styles.inputContainer} ${isDisabledOrReadOnly ? styles.disabledContainer : ""} ${icon ? styles.withIcon : ""}`.trim(), children: [icon ? _jsx("div", { className: styles.icon, children: icon }) : null, _jsx("input", { id: inputId, className: styles.input, disabled: disabled, readOnly: readOnly, ...props })] }), helperText ? _jsx("div", { className: styles.helperText, children: helperText }) : null] }));
+}
+//# sourceMappingURL=CyberpunkInput.js.map

package/dist/components/CyberpunkInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkInput.js","sourceRoot":"","sources":["../../src/components/CyberpunkInput.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAUjD,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,EACd,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,GAAG,KAAK,EACY;IACpB,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IACzC,MAAM,oBAAoB,GAAG,QAAQ,IAAI,QAAQ,CAAC;IAElD,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aAC1E,KAAK,CAAC,CAAC,CAAC,CACP,gBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,YAC7C,KAAK,GACA,CACT,CAAC,CAAC,CAAC,IAAI,EACR,eACE,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc,IAAI,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,aAElI,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,IAAI,GAAO,CAAC,CAAC,CAAC,IAAI,EACxD,gBAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAM,KAAK,GAAI,IAC9F,EACL,UAAU,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,YAAG,UAAU,GAAO,CAAC,CAAC,CAAC,IAAI,IACtE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/CyberpunkInput.module.css

@@ -0,0 +1,115 @@
+.cyberInput {
+  --input-width: 240px;
+  --input-font-size: 1rem;
+  --input-padding-top: 12px;
+  --input-padding-right: 12px;
+  --input-padding-bot: 12px;
+  --input-padding-left: 12px;
+  --focus-border-color: var(--color-accent-primary, var(--text-primary));
+  --label-offset-top: -2px;
+  --label-offset-left: 12px;
+  --label-padding: 1px 8px;
+  --label-font-size: 0.85rem;
+
+  position: relative;
+  margin-top: 10px;
+  margin-bottom: 1rem;
+  font-size: var(--input-font-size);
+}
+
+.inputContainer {
+  position: relative;
+  width: var(--input-width);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-bg-tile);
+  margin-top: 6px;
+}
+
+.input {
+  width: 100%;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: inherit;
+  background: transparent;
+  padding: var(--input-padding-top) var(--input-padding-right) var(--input-padding-bot) var(--input-padding-left);
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.cyberInput:focus-within .label {
+  color: var(--focus-border-color);
+}
+
+.cyberInput:focus-within .inputContainer {
+  border-color: var(--focus-border-color);
+}
+
+.label {
+  position: absolute;
+  top: var(--label-offset-top);
+  left: var(--label-offset-left);
+  background: var(--color-bg-tile);
+  padding: var(--label-padding);
+  font-family: var(--font-mono);
+  font-size: var(--label-font-size);
+  font-weight: 500;
+  color: var(--text-secondary);
+  z-index: 1;
+  line-height: 1.2;
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+}
+
+.inputContainer:hover {
+  border-color: var(--color-border-hover);
+}
+
+.cyberInput:focus-within .inputContainer:hover {
+  border-color: var(--focus-border-color);
+}
+
+.long {
+  --input-width: 360px;
+}
+
+.full {
+  --input-width: 100%;
+  width: 100%;
+  display: block;
+}
+
+.input:disabled,
+.input[readonly] {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.disabledContainer {
+  background: var(--color-bg-secondary) !important;
+  cursor: not-allowed;
+}
+
+.helperText {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+}
+
+.icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.withIcon .input {
+  padding-right: 44px;
+}
+

package/dist/components/CyberpunkRadio.d.ts

@@ -0,0 +1,17 @@
+import { InputHTMLAttributes } from "react";
+export interface CyberpunkRadioProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+}
+export declare function CyberpunkRadio({ label, className, id, ...props }: CyberpunkRadioProps): import("react/jsx-runtime").JSX.Element;
+export interface CyberpunkRadioGroupProps {
+    name: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+export declare function CyberpunkRadioGroup({ name, options, value, onChange, className, }: CyberpunkRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CyberpunkRadio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkRadio.d.ts","sourceRoot":"","sources":["../../src/components/CyberpunkRadio.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAc,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAS1F;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAc,GACf,EAAE,wBAAwB,2CAe1B"}

package/dist/components/CyberpunkRadio.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStableId } from "../hooks/useStableId";
+import styles from "./CyberpunkRadio.module.css";
+export function CyberpunkRadio({ label, className = "", id, ...props }) {
+    const inputId = useStableId("radio", id);
+    return (_jsxs("label", { htmlFor: inputId, className: `${styles.wrapper} ${className}`.trim(), children: [_jsx("input", { id: inputId, type: "radio", className: styles.radio, ...props }), label ? _jsx("span", { className: styles.label, children: label }) : null] }));
+}
+export function CyberpunkRadioGroup({ name, options, value, onChange, className = "", }) {
+    return (_jsx("div", { className: `${styles.radioGroup} ${className}`.trim(), children: options.map((option) => (_jsx(CyberpunkRadio, { name: name, value: option.value, label: option.label, checked: value === option.value, onChange: (event) => onChange?.(event.target.value) }, option.value))) }));
+}
+//# sourceMappingURL=CyberpunkRadio.js.map

package/dist/components/CyberpunkRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkRadio.js","sourceRoot":"","sources":["../../src/components/CyberpunkRadio.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAMjD,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,EAAuB;IACzF,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAEzC,OAAO,CACL,iBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aACzE,gBAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,KAAM,KAAK,GAAI,EACtE,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,IACvD,CACT,CAAC;AACJ,CAAC;AAUD,MAAM,UAAU,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,GACW;IACzB,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,UAAU,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,YACvD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,cAAc,IAEb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,KAAK,KAAK,MAAM,CAAC,KAAK,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAL9C,MAAM,CAAC,KAAK,CAMjB,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/CyberpunkRadio.module.css

@@ -0,0 +1,64 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.radio {
+  width: 28px;
+  height: 28px;
+  border: 2px solid var(--border);
+  border-radius: 50%;
+  appearance: none;
+  outline: none;
+  margin: 0;
+  cursor: pointer;
+  position: relative;
+  background-color: var(--bg-primary);
+  transition: all var(--transition-fast);
+}
+
+.radio::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  background-color: var(--success);
+  border-radius: 50%;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  display: block;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+}
+
+.radio:checked::before {
+  transform: scale(1);
+}
+
+.radio:hover {
+  border-color: var(--success);
+}
+
+.radio:focus-visible {
+  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
+}
+
+.radio:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.label {
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+
+.radioGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+