@steez-ui/ui 0.1.0

package/dist/components/CyberpunkSelect.d.ts

@@ -0,0 +1,12 @@
+import { SelectHTMLAttributes } from "react";
+export interface CyberpunkSelectOption {
+    value: string;
+    label: string;
+}
+export interface CyberpunkSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    variant?: "default" | "long" | "full";
+    options?: CyberpunkSelectOption[];
+}
+export declare function CyberpunkSelect({ label, variant, options, className, id, value, ...props }: CyberpunkSelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CyberpunkSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkSelect.d.ts","sourceRoot":"","sources":["../../src/components/CyberpunkSelect.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAKpD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,qBAAqB,EAAE,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,OAAmB,EACnB,OAAY,EACZ,SAAc,EACd,EAAE,EACF,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAwBtB"}

package/dist/components/CyberpunkSelect.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStableId } from "../hooks/useStableId";
+import styles from "./CyberpunkSelect.module.css";
+export function CyberpunkSelect({ label, variant = "default", options = [], className = "", id, value, ...props }) {
+    const selectId = useStableId("select", id);
+    return (_jsxs("div", { className: `${styles.cyberSelect} ${styles[variant]} ${className}`.trim(), children: [label ? (_jsx("label", { htmlFor: selectId, className: styles.label, children: label })) : null, _jsx("select", { id: selectId, className: styles.select, value: value, ...props, children: options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx("div", { className: styles.arrow, children: _jsx("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: _jsx("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] }));
+}
+//# sourceMappingURL=CyberpunkSelect.js.map

package/dist/components/CyberpunkSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkSelect.js","sourceRoot":"","sources":["../../src/components/CyberpunkSelect.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAalD,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,EAAE,EACZ,SAAS,GAAG,EAAE,EACd,EAAE,EACF,KAAK,EACL,GAAG,KAAK,EACa;IACrB,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAE3C,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aAC3E,KAAK,CAAC,CAAC,CAAC,CACP,gBAAO,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,YAC9C,KAAK,GACA,CACT,CAAC,CAAC,CAAC,IAAI,EACR,iBAAQ,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,YACpE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,GACK,EACT,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,YAC1B,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,YACvD,eAAM,CAAC,EAAC,eAAe,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,GAAG,GAClF,GACF,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/CyberpunkSelect.module.css

@@ -0,0 +1,108 @@
+.cyberSelect {
+  --select-width: 240px;
+  --select-font-size: 1rem;
+  --select-padding-top: 0.75rem;
+  --select-padding-right: 2.5rem;
+  --select-padding-bot: 0.75rem;
+  --select-padding-left: 1rem;
+
+  font-size: var(--select-font-size);
+  position: relative;
+  display: inline-block;
+  margin-bottom: 1rem;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  max-width: 100%;
+  overflow: hidden;
+  transition: all var(--transition-fast);
+}
+
+.select {
+  width: var(--select-width);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: inherit;
+  font-weight: 500;
+  background-color: transparent;
+  padding: var(--select-padding-top) var(--select-padding-right) var(--select-padding-bot) var(--select-padding-left);
+  border: none;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  position: relative;
+  z-index: 2;
+  box-sizing: border-box;
+}
+
+.label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.arrow {
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--text-secondary);
+  z-index: 10;
+  transition: color var(--transition-fast);
+}
+
+.label ~ .arrow {
+  top: calc(50% + 0.875rem);
+}
+
+.long {
+  --select-width: 360px;
+}
+
+.full {
+  --select-width: 100%;
+  width: 100%;
+  max-width: 100%;
+  display: block;
+}
+
+.full .select {
+  max-width: 100%;
+}
+
+.cyberSelect:hover {
+  border-color: var(--color-border-hover);
+}
+
+.cyberSelect:hover .arrow {
+  color: var(--text-primary);
+}
+
+.cyberSelect:focus-within {
+  border-color: var(--accent-primary);
+}
+
+.cyberSelect:focus-within .arrow {
+  color: var(--accent-primary);
+}
+
+.cyberSelect:has(select:disabled) {
+  opacity: 0.5;
+}
+
+.cyberSelect select:disabled {
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.cyberSelect select option {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  padding: 0.5rem;
+}
+

package/dist/components/CyberpunkSlider.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from "react";
+export interface CyberpunkSliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    showValue?: boolean;
+}
+export declare function CyberpunkSlider({ label, className, id, min, max, step, showValue, value, ...props }: CyberpunkSliderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CyberpunkSlider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkSlider.d.ts","sourceRoot":"","sources":["../../src/components/CyberpunkSlider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,SAAc,EACd,EAAE,EACF,GAAO,EACP,GAAS,EACT,IAAQ,EACR,SAAgB,EAChB,KAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA2BtB"}

package/dist/components/CyberpunkSlider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStableId } from "../hooks/useStableId";
+import styles from "./CyberpunkSlider.module.css";
+export function CyberpunkSlider({ label, className = "", id, min = 0, max = 100, step = 1, showValue = true, value = 0, ...props }) {
+    const inputId = useStableId("slider", id);
+    const percentage = ((Number(value) - min) / (max - min)) * 100;
+    return (_jsxs("div", { className: `${styles.wrapper} ${className}`.trim(), children: [label ? (_jsx("label", { htmlFor: inputId, className: styles.label, children: label })) : null, _jsxs("div", { className: styles.sliderContainer, children: [_jsx("input", { id: inputId, type: "range", min: min, max: max, step: step, value: value, className: styles.slider, style: { ["--slider-percentage"]: `${percentage}%` }, ...props }), showValue ? _jsx("span", { className: styles.value, children: value }) : null] })] }));
+}
+//# sourceMappingURL=CyberpunkSlider.js.map

package/dist/components/CyberpunkSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkSlider.js","sourceRoot":"","sources":["../../src/components/CyberpunkSlider.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAWlD,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,CAAC,EACR,SAAS,GAAG,IAAI,EAChB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACa;IACrB,MAAM,OAAO,GAAG,WAAW,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAE/D,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aACpD,KAAK,CAAC,CAAC,CAAC,CACP,gBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,YAC7C,KAAK,GACA,CACT,CAAC,CAAC,CAAC,IAAI,EACR,eAAK,SAAS,EAAE,MAAM,CAAC,eAAe,aACpC,gBACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,KAAK,EAAE,EAAE,CAAC,qBAA+B,CAAC,EAAE,GAAG,UAAU,GAAG,EAAyB,KACjF,KAAK,GACT,EACD,SAAS,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC7D,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/CyberpunkSlider.module.css

@@ -0,0 +1,98 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.label {
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.sliderContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.slider {
+  flex: 1;
+  height: 32px;
+  border: 2px solid var(--border);
+  border-radius: 16px;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  padding-right: 14px;
+  margin-right: -14px;
+  background: linear-gradient(
+    to right,
+    var(--success) 0%,
+    var(--success) var(--slider-percentage, 0%),
+    var(--bg-primary) var(--slider-percentage, 0%),
+    var(--bg-primary) 100%
+  );
+}
+
+.slider::-webkit-slider-track {
+  width: calc(100% + 14px);
+  height: 28px;
+  border-radius: 14px;
+  background: transparent;
+}
+
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--success);
+  cursor: pointer;
+  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
+  transition: all var(--transition-fast);
+  border: 2px solid rgba(0, 255, 136, 0.2);
+}
+
+.slider::-moz-range-track {
+  width: calc(100% + 14px);
+  height: 28px;
+  border-radius: 14px;
+  background: transparent;
+  border: none;
+}
+
+.slider::-moz-range-thumb {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--success);
+  cursor: pointer;
+  border: 2px solid rgba(0, 255, 136, 0.2);
+  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
+  transition: all var(--transition-fast);
+}
+
+.slider:hover {
+  border-color: var(--success);
+}
+
+.slider:focus-visible {
+  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
+}
+
+.slider:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.value {
+  font-size: 0.875rem;
+  color: var(--success);
+  font-weight: 600;
+  min-width: 3rem;
+  text-align: center;
+  font-family: var(--font-mono);
+}
+

package/dist/components/CyberpunkTextarea.d.ts

@@ -0,0 +1,7 @@
+import { TextareaHTMLAttributes } from "react";
+export interface CyberpunkTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    variant?: "default" | "full";
+}
+export declare function CyberpunkTextarea({ label, variant, className, id, ...props }: CyberpunkTextareaProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CyberpunkTextarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkTextarea.d.ts","sourceRoot":"","sources":["../../src/components/CyberpunkTextarea.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IACzF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC9B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAmB,EACnB,SAAc,EACd,EAAE,EACF,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAexB"}

package/dist/components/CyberpunkTextarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStableId } from "../hooks/useStableId";
+import styles from "./CyberpunkTextarea.module.css";
+export function CyberpunkTextarea({ label, variant = "default", className = "", id, ...props }) {
+    const textareaId = useStableId("textarea", id);
+    return (_jsxs("div", { className: `${styles.cyberTextarea} ${styles[variant]} ${className}`.trim(), children: [label ? (_jsx("label", { htmlFor: textareaId, className: styles.label, children: label })) : null, _jsx("div", { className: styles.textareaContainer, children: _jsx("textarea", { id: textareaId, className: styles.textarea, ...props }) })] }));
+}
+//# sourceMappingURL=CyberpunkTextarea.js.map

package/dist/components/CyberpunkTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkTextarea.js","sourceRoot":"","sources":["../../src/components/CyberpunkTextarea.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAOpD,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACe;IACvB,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAE/C,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,aAAa,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,aAC7E,KAAK,CAAC,CAAC,CAAC,CACP,gBAAO,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,YAChD,KAAK,GACA,CACT,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACtC,mBAAU,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,KAAM,KAAK,GAAI,GAC/D,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/CyberpunkTextarea.module.css

@@ -0,0 +1,73 @@
+.cyberTextarea {
+  --textarea-width: 400px;
+  --textarea-font-size: 1rem;
+  --textarea-padding-top: 12px;
+  --textarea-padding-right: 12px;
+  --textarea-padding-bot: 12px;
+  --textarea-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-bottom: 1rem;
+  font-size: var(--textarea-font-size);
+}
+
+.textareaContainer {
+  position: relative;
+  width: var(--textarea-width);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-bg-tile);
+  margin-top: 6px;
+}
+
+.textarea {
+  width: 100%;
+  min-height: 100px;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: inherit;
+  background: transparent;
+  padding: var(--textarea-padding-top) var(--textarea-padding-right) var(--textarea-padding-bot) var(--textarea-padding-left);
+  border: none;
+  outline: none;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.cyberTextarea:focus-within .label {
+  color: var(--focus-border-color);
+}
+
+.cyberTextarea:focus-within .textareaContainer {
+  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;
+}
+
+.full {
+  --textarea-width: 100%;
+  width: 100%;
+  display: block;
+}
+
+.textarea:disabled {
+  color: var(--text-muted);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+

package/dist/components/CyberpunkTile.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface CyberpunkTileProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+    variant?: "default" | "small" | "big" | "scrollable" | "ios";
+    center?: boolean;
+    contentClassName?: string;
+}
+export declare function CyberpunkTile({ children, className, variant, onClick, style, center, contentClassName, ...props }: CyberpunkTileProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CyberpunkTile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkTile.d.ts","sourceRoot":"","sources":["../../src/components/CyberpunkTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,YAAY,GAAG,KAAK,CAAC;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAc,EACd,OAAmB,EACnB,OAAO,EACP,KAAK,EACL,MAAc,EACd,gBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAiBpB"}

package/dist/components/CyberpunkTile.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./CyberpunkTile.module.css";
+export function CyberpunkTile({ children, className = "", variant = "default", onClick, style, center = false, contentClassName = "", ...props }) {
+    return (_jsxs("div", { className: `${styles.tile} ${variant !== "default" ? styles[variant] : ""} ${onClick ? styles.tileInteractive : ""} ${className}`.trim(), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, style: style, ...props, children: [_jsx("div", { className: `${styles.content} ${center ? styles.centerContent : ""} ${contentClassName}`.trim(), children: children }), _jsx("div", { className: styles.cornerAccent, "data-corner": "top-right" }), _jsx("div", { className: styles.cornerAccent, "data-corner": "bottom-left" })] }));
+}
+//# sourceMappingURL=CyberpunkTile.js.map

package/dist/components/CyberpunkTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CyberpunkTile.js","sourceRoot":"","sources":["../../src/components/CyberpunkTile.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAUhD,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,KAAK,EACL,MAAM,GAAG,KAAK,EACd,gBAAgB,GAAG,EAAE,EACrB,GAAG,KAAK,EACW;IACnB,OAAO,CACL,eACE,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,EACxI,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,KAAK,EAAE,KAAK,KACR,KAAK,aAET,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,YACjG,QAAQ,GACL,EACN,cAAK,SAAS,EAAE,MAAM,CAAC,YAAY,iBAAc,WAAW,GAAG,EAC/D,cAAK,SAAS,EAAE,MAAM,CAAC,YAAY,iBAAc,aAAa,GAAG,IAC7D,CACP,CAAC;AACJ,CAAC"}

package/dist/components/CyberpunkTile.module.css

@@ -0,0 +1,133 @@
+.tile {
+  --tile-padding: 1.5rem;
+  --tile-edges: 20px;
+  --tile-border-color: var(--color-border-light);
+  --tile-border-width: 1px;
+
+  position: relative;
+  background: var(--color-bg-tile);
+  color: var(--text-primary);
+  padding: var(--tile-padding);
+  min-height: 60px;
+  height: 100%;
+  transition: background-color var(--transition-normal);
+  width: 100%;
+  max-width: 100%;
+  cursor: default;
+  box-sizing: border-box;
+  overflow: hidden;
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--tile-edges)) 0,
+    100% var(--tile-edges),
+    100% 100%,
+    var(--tile-edges) 100%,
+    0 calc(100% - var(--tile-edges))
+  );
+}
+
+.tileInteractive {
+  cursor: pointer;
+}
+
+.tile::before,
+.tile::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.tile::before {
+  background: var(--tile-border-color);
+  clip-path: inherit;
+  z-index: 0;
+}
+
+.tile::after {
+  background: var(--color-bg-tile);
+  transition: background-color var(--transition-normal);
+  clip-path: polygon(
+    var(--tile-border-width) var(--tile-border-width),
+    calc(100% - var(--tile-edges) - var(--tile-border-width)) var(--tile-border-width),
+    calc(100% - var(--tile-border-width)) calc(var(--tile-edges) + var(--tile-border-width)),
+    calc(100% - var(--tile-border-width)) calc(100% - var(--tile-border-width)),
+    calc(var(--tile-edges) + var(--tile-border-width)) calc(100% - var(--tile-border-width)),
+    var(--tile-border-width) calc(100% - var(--tile-edges) - var(--tile-border-width))
+  );
+  z-index: 1;
+}
+
+.tile:hover::after {
+  background: var(--color-bg-tile-hover);
+}
+
+.small {
+  --tile-edges: 14px;
+  --tile-padding: 1rem;
+}
+
+.big {
+  --tile-edges: 26px;
+  --tile-padding: 2rem;
+}
+
+.scrollable {
+  max-height: 600px;
+}
+
+.ios {
+  --tile-padding: 12px;
+  --tile-edges: 0;
+  border-radius: 10px;
+  clip-path: none;
+}
+
+.ios::before,
+.ios::after {
+  clip-path: none;
+  border-radius: 10px;
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.centerContent {
+  align-items: center;
+  justify-content: center;
+}
+
+.cornerAccent {
+  position: absolute;
+  width: var(--tile-edges);
+  height: var(--tile-edges);
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+  pointer-events: none;
+  z-index: 3;
+}
+
+.cornerAccent[data-corner="top-right"] {
+  top: 0;
+  right: 0;
+  background: var(--text-primary);
+  clip-path: polygon(calc(100% - var(--tile-edges)) 0, 100% 0, 100% var(--tile-edges));
+}
+
+.cornerAccent[data-corner="bottom-left"] {
+  bottom: 0;
+  left: 0;
+  background: var(--text-primary);
+  clip-path: polygon(0 calc(100% - var(--tile-edges)), 0 100%, var(--tile-edges) 100%);
+}
+
+.big:hover .cornerAccent {
+  opacity: 1;
+}
+

package/dist/components/ErrorMessage.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface ErrorMessageProps {
+    title?: string;
+    message: string;
+    details?: string;
+    onRetry?: () => void;
+    onDismiss?: () => void;
+    variant?: "inline" | "card" | "fullScreen";
+}
+export declare const ErrorMessage: React.NamedExoticComponent<ErrorMessageProps>;
+//# sourceMappingURL=ErrorMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../src/components/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,YAAY,CAAC;CAC5C;AAED,eAAO,MAAM,YAAY,+CA+DvB,CAAC"}

package/dist/components/ErrorMessage.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { CloseIcon, RefreshIcon, WarningIcon } from "@steez-ui/icons";
+import buttonStyles from "../styles/Buttons.module.css";
+import styles from "./ErrorMessage.module.css";
+export const ErrorMessage = React.memo(function ErrorMessage({ title = "Error", message, details, onRetry, onDismiss, variant = "card", }) {
+    const content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.header, children: [_jsx(WarningIcon, { width: 24, height: 24 }), _jsx("h3", { children: title })] }), _jsx("p", { className: styles.message, children: message }), details ? (_jsxs("details", { className: styles.details, children: [_jsx("summary", { children: "Details" }), _jsx("pre", { children: details })] })) : null, onRetry || onDismiss ? (_jsxs("div", { className: styles.actions, children: [onRetry ? (_jsxs("button", { type: "button", onClick: onRetry, className: buttonStyles.secondary, children: [_jsx(RefreshIcon, { width: 16, height: 16 }), " ", "Try Again"] })) : null, onDismiss ? (_jsxs("button", { type: "button", onClick: onDismiss, className: buttonStyles.secondary, children: [_jsx(CloseIcon, { width: 16, height: 16 }), " ", "Dismiss"] })) : null] })) : null] }));
+    if (variant === "fullScreen") {
+        return (_jsx("div", { className: styles.fullScreen, role: "alert", "aria-live": "assertive", children: _jsx("div", { className: styles.card, children: content }) }));
+    }
+    if (variant === "inline") {
+        return (_jsx("div", { className: styles.inline, role: "alert", "aria-live": "assertive", children: content }));
+    }
+    return (_jsx("div", { className: styles.card, role: "alert", "aria-live": "assertive", children: content }));
+});
+//# sourceMappingURL=ErrorMessage.js.map

package/dist/components/ErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../src/components/ErrorMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtE,OAAO,YAAY,MAAM,8BAA8B,CAAC;AACxD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAW/C,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,YAAY,CAAC,EAC3D,KAAK,GAAG,OAAO,EACf,OAAO,EACP,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,GAAG,MAAM,GACE;IAClB,MAAM,OAAO,GAAG,CACd,8BACE,eAAK,SAAS,EAAE,MAAM,CAAC,MAAM,aAC3B,KAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACtC,uBAAK,KAAK,GAAM,IACZ,EACN,YAAG,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAK,EAC1C,OAAO,CAAC,CAAC,CAAC,CACT,mBAAS,SAAS,EAAE,MAAM,CAAC,OAAO,aAChC,wCAA0B,EAC1B,wBAAM,OAAO,GAAO,IACZ,CACX,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,CACtB,eAAK,SAAS,EAAE,MAAM,CAAC,OAAO,aAC3B,OAAO,CAAC,CAAC,CAAC,CACT,kBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,aACvE,KAAC,WAAW,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACrC,GAAG,iBAEG,CACV,CAAC,CAAC,CAAC,IAAI,EACP,SAAS,CAAC,CAAC,CAAC,CACX,kBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,aACzE,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EACnC,GAAG,eAEG,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAC;IAEF,IAAI,OAAO,KAAK,YAAY,EAAE,CAAC;QAC7B,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,IAAI,EAAC,OAAO,eAAW,WAAW,YACnE,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,OAAO,GAAO,GACxC,CACP,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACzB,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAC,OAAO,eAAW,WAAW,YAC9D,OAAO,GACJ,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,eAAW,WAAW,YAC5D,OAAO,GACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/ErrorMessage.module.css

@@ -0,0 +1,75 @@
+.card {
+  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
+  border: 1px solid var(--danger);
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.inline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--danger-bg);
+  border-left: 4px solid var(--danger);
+  margin: 0.5rem 0;
+}
+
+.fullScreen {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(1, 6, 7, 0.8);
+  z-index: 999;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--danger);
+  margin-bottom: 0.5rem;
+}
+
+.header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.message {
+  color: var(--text-primary);
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+}
+
+.details {
+  margin: 1rem 0;
+  padding: 0.5rem;
+  background: var(--bg-primary);
+  border-radius: var(--radius-sm);
+  font-size: 0.85rem;
+}
+
+.details summary {
+  cursor: pointer;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.details pre {
+  margin: 0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+

package/dist/components/LoadingProgressBar.d.ts

@@ -0,0 +1,8 @@
+export declare const LOADING_PROGRESS_SEGMENT_COUNT = 20;
+export interface LoadingProgressBarProps {
+    progress: number;
+    className?: string;
+    valueLabel?: string;
+}
+export declare function LoadingProgressBar({ progress, className, valueLabel, }: LoadingProgressBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoadingProgressBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/LoadingProgressBar.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,8BAA8B,KAAK,CAAC;AAIjD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,UAAU,GACX,EAAE,uBAAuB,2CAqBzB"}