@fangxinyan/lumina 0.1.0

package/dist/Select.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { IconName } from './Icon.js';
+
+interface SelectOption<T extends string | number = string> {
+    value: T;
+    label: React.ReactNode;
+    /** Searchable text — used by default filter when `label` isn't a string. */
+    text?: string;
+    /** Secondary line shown beneath the label. */
+    description?: React.ReactNode;
+    /** Leading icon. */
+    icon?: IconName;
+    disabled?: boolean;
+}
+interface SelectOptionGroup<T extends string | number = string> {
+    /** Group heading. */
+    label: React.ReactNode;
+    options: SelectOption<T>[];
+}
+type SelectItem<T extends string | number = string> = SelectOption<T> | SelectOptionGroup<T>;
+interface BaseSelectProps<T extends string | number = string> {
+    /** Flat or mixed (groups + options) item list. */
+    options: SelectItem<T>[];
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    /** Show invalid (red) ring. */
+    invalid?: boolean;
+    /** Show a small × to clear the selection (single mode) or all selections (multi). */
+    clearable?: boolean;
+    /** Add a search input at the top of the menu. */
+    searchable?: boolean;
+    /** Custom filter — defaults to label/text/value substring match. */
+    filterOption?: (input: string, option: SelectOption<T>) => boolean;
+    /** Show spinner instead of options. */
+    loading?: boolean;
+    /** Custom empty content when no options match. */
+    emptyContent?: React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    /** Class for the popped-out menu. */
+    menuClassName?: string;
+}
+interface SingleSelectProps<T extends string | number = string> extends BaseSelectProps<T> {
+    multiple?: false;
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    /** Fired when user clears the selection via the × button. */
+    onClear?: () => void;
+}
+interface MultiSelectProps<T extends string | number = string> extends BaseSelectProps<T> {
+    multiple: true;
+    value?: T[];
+    defaultValue?: T[];
+    onChange?: (value: T[]) => void;
+    /** Max selected items shown as tags before collapsing to "+N". */
+    maxTagCount?: number;
+}
+type SelectProps<T extends string | number = string> = SingleSelectProps<T> | MultiSelectProps<T>;
+/** `Select` — neumorphic dropdown. Set `multiple` for tag-style multi-select. */
+declare function Select<T extends string | number = string>(props: SingleSelectProps<T>): React.ReactElement;
+declare function Select<T extends string | number = string>(props: MultiSelectProps<T>): React.ReactElement;
+
+export { type MultiSelectProps, Select, type SelectItem, type SelectOption, type SelectOptionGroup, type SelectProps, type SingleSelectProps };

package/dist/Select.js

@@ -0,0 +1,5 @@
+export { Select } from './chunk-T5AH4FCV.js';
+import './chunk-3QWHDCHJ.js';
+import './chunk-GEYMWUW6.js';
+//# sourceMappingURL=Select.js.map
+//# sourceMappingURL=Select.js.map

package/dist/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Select.js"}

package/dist/Slider-RE4HZQKF.css

@@ -0,0 +1,59 @@
+/* ============ Slider ============ */
+.slider {
+  position: relative;
+  height: 36px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.slider.disabled { opacity: 0.5; cursor: not-allowed; }
+.slider-track {
+  position: relative;
+  width: 100%;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  overflow: hidden;
+}
+.slider-fill {
+  position: absolute;
+  top: 0; left: 0; bottom: 0;
+  background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 70%, white), var(--accent));
+  box-shadow: 0 0 12px var(--accent-glow);
+  border-radius: 999px;
+  transition: width var(--dur-fast) var(--ease);
+}
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: 22px; height: 22px;
+  border-radius: 999px;
+  background: var(--bg-raised);
+  box-shadow: var(--neu-out-sm);
+  transform: translate(-50%, -50%);
+  transition: all var(--dur-fast) var(--ease);
+  display: grid; place-items: center;
+}
+.slider-thumb::after {
+  content: "";
+  width: 6px; height: 6px;
+  border-radius: 999px;
+  background: var(--accent);
+}
+.slider:hover .slider-thumb { transform: translate(-50%, -50%) scale(1.08); }
+.slider input[type="range"] {
+  position: absolute;
+  inset: 0;
+  width: 100%; height: 100%;
+  opacity: 0;
+  cursor: inherit;
+}
+.slider-value { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); margin-left: 10px; }
+.slider.success .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--success) 70%, white), var(--success)); box-shadow: 0 0 10px color-mix(in oklch, var(--success) 35%, transparent); }
+.slider.success .slider-thumb::after { background: var(--success); }
+.slider.warning .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--warning) 70%, white), var(--warning)); box-shadow: 0 0 10px color-mix(in oklch, var(--warning) 35%, transparent); }
+.slider.warning .slider-thumb::after { background: var(--warning); }
+.slider.danger  .slider-fill { background: linear-gradient(90deg, color-mix(in oklch, var(--danger) 70%, white), var(--danger));  box-shadow: 0 0 10px color-mix(in oklch, var(--danger) 35%, transparent); }
+.slider.danger  .slider-thumb::after { background: var(--danger); }

package/dist/Slider.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var chunkV2ZUOEXM_cjs = require('./chunk-V2ZUOEXM.cjs');
+
+
+
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () { return chunkV2ZUOEXM_cjs.Slider; }
+});
+//# sourceMappingURL=Slider.cjs.map
+//# sourceMappingURL=Slider.cjs.map

package/dist/Slider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Slider.cjs"}

package/dist/Slider.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    tone?: "accent" | "success" | "warning" | "danger";
+    className?: string;
+}
+/** `Slider` — neumorphic range input with grooved track. */
+declare const Slider: React.FC<SliderProps>;
+
+export { Slider, type SliderProps };

package/dist/Slider.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    tone?: "accent" | "success" | "warning" | "danger";
+    className?: string;
+}
+/** `Slider` — neumorphic range input with grooved track. */
+declare const Slider: React.FC<SliderProps>;
+
+export { Slider, type SliderProps };

package/dist/Slider.js

@@ -0,0 +1,3 @@
+export { Slider } from './chunk-6YVW3VYL.js';
+//# sourceMappingURL=Slider.js.map
+//# sourceMappingURL=Slider.js.map

package/dist/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Slider.js"}

package/dist/Switch-NP7KKJOX.css

@@ -0,0 +1,44 @@
+/* ============ Switch ============ */
+.switch {
+  --w: 46px;
+  --h: 26px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--fg);
+  cursor: pointer;
+  user-select: none;
+}
+.switch.disabled { opacity: 0.5; cursor: not-allowed; }
+.switch-track {
+  position: relative;
+  width: var(--w);
+  height: var(--h);
+  border: none;
+  padding: 0;
+  border-radius: 999px;
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  cursor: inherit;
+  flex-shrink: 0;
+  transition: all var(--dur) var(--ease);
+}
+.switch.sm { --w: 36px; --h: 20px; }
+.switch.lg { --w: 58px; --h: 32px; }
+.switch-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: calc(var(--h) - 6px);
+  height: calc(var(--h) - 6px);
+  border-radius: 999px;
+  background: var(--bg-raised);
+  box-shadow: var(--neu-out-sm);
+  transition: all var(--dur) var(--ease);
+}
+.switch.on .switch-thumb {
+  transform: translateX(calc(var(--w) - var(--h)));
+  background: var(--accent);
+  box-shadow: 0 2px 8px var(--accent-glow), 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent);
+}

package/dist/Switch.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var chunkALFDP5WX_cjs = require('./chunk-ALFDP5WX.cjs');
+
+
+
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () { return chunkALFDP5WX_cjs.Switch; }
+});
+//# sourceMappingURL=Switch.cjs.map
+//# sourceMappingURL=Switch.cjs.map

package/dist/Switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Switch.cjs"}

package/dist/Switch.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    size?: "sm" | "md";
+    className?: string;
+    id?: string;
+}
+/**
+ * `Switch` — on/off toggle. Controlled or uncontrolled.
+ */
+declare const Switch: React.FC<SwitchProps>;
+
+export { Switch, type SwitchProps };

package/dist/Switch.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    size?: "sm" | "md";
+    className?: string;
+    id?: string;
+}
+/**
+ * `Switch` — on/off toggle. Controlled or uncontrolled.
+ */
+declare const Switch: React.FC<SwitchProps>;
+
+export { Switch, type SwitchProps };

package/dist/Switch.js

@@ -0,0 +1,3 @@
+export { Switch } from './chunk-HTP6UEVR.js';
+//# sourceMappingURL=Switch.js.map
+//# sourceMappingURL=Switch.js.map

package/dist/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Switch.js"}

package/dist/Table-ZDPGWLH3.css

@@ -0,0 +1,139 @@
+/* ============ Table ============ */
+.table-card {
+  border-radius: var(--r-lg);
+  background: var(--bg);
+  box-shadow: var(--neu-out-sm);
+  overflow: hidden;
+}
+.table-wrap {
+  border-radius: var(--r-lg);
+  background: var(--bg);
+  box-shadow: var(--neu-in-sm);
+  overflow: auto;
+}
+.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 13px;
+}
+.table th {
+  text-align: left;
+  padding: 14px 18px;
+  background: var(--bg);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-subtle);
+  border-bottom: 1px solid var(--divider);
+  position: sticky; top: 0;
+  z-index: 1;
+}
+.table th.sortable { cursor: pointer; user-select: none; }
+.table th.sortable:hover { color: var(--fg); }
+.table th .sort-ind {
+  display: inline-flex;
+  width: 16px; height: 16px;
+  border-radius: 6px;
+  background: var(--bg);
+  box-shadow: var(--neu-flat);
+  align-items: center; justify-content: center;
+  margin-left: 6px;
+  color: var(--fg-subtle);
+  vertical-align: middle;
+}
+.table th.sorted .sort-ind { color: var(--accent); box-shadow: var(--neu-in-sm); }
+.table td {
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--divider);
+  vertical-align: middle;
+}
+.table.hoverable tbody tr:hover td { background: color-mix(in oklch, var(--accent-soft) 40%, transparent); }
+.table tbody tr.clickable { cursor: pointer; }
+.table tbody tr.selected td { background: color-mix(in oklch, var(--accent-soft) 80%, transparent); color: var(--accent-ink); }
+.table tbody tr:last-child td { border-bottom: none; }
+.table.striped tbody tr:nth-child(even) td {
+  background: color-mix(in oklch, var(--bg-sunken) 40%, transparent);
+}
+
+/* Embossed: each row sits on the surface */
+.table.embossed { border-spacing: 0; }
+.table.embossed tbody td {
+  background: var(--bg);
+}
+
+/* Card-row variant: each row is its own raised pill */
+.table.cards {
+  border-collapse: separate;
+  border-spacing: 0 10px;
+  padding: 10px;
+  background: transparent;
+  box-shadow: none;
+}
+.table.cards thead th {
+  background: transparent;
+  border-bottom: none;
+  padding-top: 0;
+  padding-bottom: 6px;
+}
+.table.cards tbody td {
+  background: var(--bg);
+  border-bottom: none;
+  padding: 14px 18px;
+}
+.table.cards tbody td:first-child {
+  border-radius: var(--r-md) 0 0 var(--r-md);
+  box-shadow: -4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
+}
+.table.cards tbody td:last-child {
+  border-radius: 0 var(--r-md) var(--r-md) 0;
+  box-shadow: 4px 4px 8px var(--shadow-dark), 4px -4px 8px var(--shadow-light);
+}
+.table.cards tbody td:not(:first-child):not(:last-child) {
+  box-shadow: 0 4px 8px var(--shadow-dark), 0 -4px 8px var(--shadow-light);
+}
+.table.cards.hoverable tbody tr:hover td { background: var(--bg); transform: translateY(-1px); }
+
+.table .row-check { width: 36px; }
+.table-empty { padding: 60px 20px; text-align: center; color: var(--fg-muted); }
+
+/* Pro: card-wrap with toolbar + table + footer */
+.table-card {
+  border-radius: var(--r-lg);
+  background: var(--bg);
+  box-shadow: var(--neu-out-sm);
+  overflow: hidden;
+}
+.table-card .table-wrap { background: transparent; box-shadow: none; border-radius: 0; }
+.table-card .table-wrap.joined { border-radius: 0; }
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-3);
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--divider);
+}
+.table-toolbar .table-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-right: 8px;
+}
+.table-toolbar-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.table-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.table-footer {
+  padding: 10px 16px;
+  border-top: 1px solid var(--divider);
+  background: color-mix(in oklch, var(--bg-sunken) 30%, transparent);
+}

package/dist/Table.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunk2VA2HSL4_cjs = require('./chunk-2VA2HSL4.cjs');
+require('./chunk-C5TGQ7CV.cjs');
+require('./chunk-YVO7XO4W.cjs');
+
+
+
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () { return chunk2VA2HSL4_cjs.Table; }
+});
+Object.defineProperty(exports, "TablePro", {
+  enumerable: true,
+  get: function () { return chunk2VA2HSL4_cjs.TablePro; }
+});
+//# sourceMappingURL=Table.cjs.map
+//# sourceMappingURL=Table.cjs.map

package/dist/Table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Table.cjs"}

package/dist/Table.d.cts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface TableColumn<Row = any> {
+    key: string;
+    title: React.ReactNode;
+    /** Data key to read from row, or custom render. */
+    dataIndex?: keyof Row;
+    render?: (value: any, row: Row, index: number) => React.ReactNode;
+    width?: number | string;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+}
+type TableVariant = "default" | "striped" | "embossed" | "cards";
+interface TableProps<Row = any> {
+    columns: TableColumn<Row>[];
+    data: Row[];
+    rowKey?: keyof Row | ((row: Row) => string | number);
+    /** Visual variant. */
+    variant?: TableVariant;
+    /** Hoverable rows. */
+    hoverable?: boolean;
+    /** Striped rows (shortcut for variant="striped"). */
+    striped?: boolean;
+    /** Sort state — controlled. */
+    sortKey?: string;
+    sortDir?: "asc" | "desc";
+    onSort?: (key: string) => void;
+    /** Row selection — controlled list of selected row keys. */
+    selectable?: boolean;
+    selected?: (string | number)[];
+    onSelect?: (keys: (string | number)[]) => void;
+    /** Called when user clicks a row. */
+    onRowClick?: (row: Row, index: number) => void;
+    /** Empty state. */
+    empty?: React.ReactNode;
+    className?: string;
+}
+/** `Table` — neumorphic data table with sorting, selection and visual variants. */
+declare function Table<Row extends Record<string, any> = any>({ columns, data, rowKey, variant, hoverable, striped, sortKey, sortDir, onSort, selectable, selected, onSelect, onRowClick, empty, className, }: TableProps<Row>): react_jsx_runtime.JSX.Element;
+interface TableProProps<Row = any> extends TableProps<Row> {
+    /** Toolbar slot — search input, filter, etc. */
+    toolbar?: React.ReactNode;
+    /** Right-aligned actions slot in toolbar. */
+    actions?: React.ReactNode;
+    /** Footer slot — usually <Pagination />. */
+    footer?: React.ReactNode;
+    /** Title shown above the toolbar. */
+    title?: React.ReactNode;
+}
+/**
+ * `TablePro` — full-featured table card with toolbar, sortable/selectable rows,
+ * variants, and a footer slot for pagination.
+ */
+declare function TablePro<Row extends Record<string, any> = any>({ toolbar, actions, footer, title, className, ...tableProps }: TableProProps<Row>): react_jsx_runtime.JSX.Element;
+
+export { Table, type TableColumn, TablePro, type TableProProps, type TableProps, type TableVariant };

package/dist/Table.d.ts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface TableColumn<Row = any> {
+    key: string;
+    title: React.ReactNode;
+    /** Data key to read from row, or custom render. */
+    dataIndex?: keyof Row;
+    render?: (value: any, row: Row, index: number) => React.ReactNode;
+    width?: number | string;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+}
+type TableVariant = "default" | "striped" | "embossed" | "cards";
+interface TableProps<Row = any> {
+    columns: TableColumn<Row>[];
+    data: Row[];
+    rowKey?: keyof Row | ((row: Row) => string | number);
+    /** Visual variant. */
+    variant?: TableVariant;
+    /** Hoverable rows. */
+    hoverable?: boolean;
+    /** Striped rows (shortcut for variant="striped"). */
+    striped?: boolean;
+    /** Sort state — controlled. */
+    sortKey?: string;
+    sortDir?: "asc" | "desc";
+    onSort?: (key: string) => void;
+    /** Row selection — controlled list of selected row keys. */
+    selectable?: boolean;
+    selected?: (string | number)[];
+    onSelect?: (keys: (string | number)[]) => void;
+    /** Called when user clicks a row. */
+    onRowClick?: (row: Row, index: number) => void;
+    /** Empty state. */
+    empty?: React.ReactNode;
+    className?: string;
+}
+/** `Table` — neumorphic data table with sorting, selection and visual variants. */
+declare function Table<Row extends Record<string, any> = any>({ columns, data, rowKey, variant, hoverable, striped, sortKey, sortDir, onSort, selectable, selected, onSelect, onRowClick, empty, className, }: TableProps<Row>): react_jsx_runtime.JSX.Element;
+interface TableProProps<Row = any> extends TableProps<Row> {
+    /** Toolbar slot — search input, filter, etc. */
+    toolbar?: React.ReactNode;
+    /** Right-aligned actions slot in toolbar. */
+    actions?: React.ReactNode;
+    /** Footer slot — usually <Pagination />. */
+    footer?: React.ReactNode;
+    /** Title shown above the toolbar. */
+    title?: React.ReactNode;
+}
+/**
+ * `TablePro` — full-featured table card with toolbar, sortable/selectable rows,
+ * variants, and a footer slot for pagination.
+ */
+declare function TablePro<Row extends Record<string, any> = any>({ toolbar, actions, footer, title, className, ...tableProps }: TableProProps<Row>): react_jsx_runtime.JSX.Element;
+
+export { Table, type TableColumn, TablePro, type TableProProps, type TableProps, type TableVariant };

package/dist/Table.js

@@ -0,0 +1,5 @@
+export { Table, TablePro } from './chunk-2W2AJUZW.js';
+import './chunk-M6CGYGEO.js';
+import './chunk-GEYMWUW6.js';
+//# sourceMappingURL=Table.js.map
+//# sourceMappingURL=Table.js.map

package/dist/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Table.js"}