silver-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Andrey Goder
+
+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,306 @@
+# silver-ui
+
+A React component library with CSS variable theming, built with [Panda CSS](https://panda-css.com/).
+
+[Storybook](https://silver-ui-eight.vercel.app/) — browse and interact with all components.
+
+## Installation
+
+silver-ui is not published to npm yet. Until it is, consume a local build by
+copying the full build output into your app:
+
+```bash
+pnpm build
+rm -rf path/to/app/src/vendor/silver-ui
+mkdir -p path/to/app/src/vendor/silver-ui
+cp -R dist/* path/to/app/src/vendor/silver-ui/
+```
+
+Copy the whole `dist/` directory, not only `index.js`; component entry points
+share generated chunks.
+
+The vendored build expects your app to install silver-ui's runtime
+dependencies:
+
+```bash
+npm install lucide-react
+# or
+pnpm add lucide-react
+# or
+yarn add lucide-react
+```
+
+Then import from the vendored ESM files. Use component subpaths for smaller JS
+bundles:
+
+```tsx
+import './vendor/silver-ui/styles.css';
+import {Button} from './vendor/silver-ui/components/Button/index.js';
+
+function App() {
+  return <Button label="Click me" />;
+}
+```
+
+The root vendored entry is also available when convenience matters more than
+bundle size:
+
+```tsx
+import './vendor/silver-ui/styles.css';
+import {Button} from './vendor/silver-ui/index.js';
+```
+
+The JS bundle uses the standard React ecosystem pattern
+`process.env.NODE_ENV` for development-only validation. Most app bundlers
+(Vite, Webpack, Next.js, Remix, etc.) replace this automatically. If you copy
+the file into a setup that does not perform that replacement, configure your
+bundler to define it. For example:
+
+```ts
+import {defineConfig} from 'vite';
+
+export default defineConfig({
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(
+      process.env.NODE_ENV ?? 'development',
+    ),
+  },
+});
+```
+
+Once silver-ui is published, install it from npm:
+
+```bash
+npm install silver-ui
+# or
+pnpm add silver-ui
+# or
+yarn add silver-ui
+```
+
+The npm package exposes the same tree-shakeable component subpaths:
+
+```tsx
+import 'silver-ui/styles.css';
+import {Button} from 'silver-ui/Button';
+import {SideNav, SideNavItem} from 'silver-ui/SideNav';
+```
+
+## Usage
+
+Import the stylesheet once in your app's entry point, then use components:
+
+```tsx
+import 'silver-ui/styles.css';
+import {Button} from 'silver-ui';
+
+function App() {
+  return (
+    <Button variant="solid" size="md">
+      Click me
+    </Button>
+  );
+}
+```
+
+For smaller JS bundles, import component subpaths:
+
+```tsx
+import 'silver-ui/styles.css';
+import {Button} from 'silver-ui/Button';
+import {SideNav, SideNavItem} from 'silver-ui/SideNav';
+```
+
+## Theming
+
+silver-ui uses CSS variables for theming. Override any `--silver-*` variable to
+customize colors, typography, spacing, radii, and more. All library styles use
+CSS `@layer`, so your overrides always win without specificity battles.
+
+```css
+:root {
+  --silver-colors-primary: #e11d48;
+  --silver-colors-primary-hover: #be123c;
+  --silver-colors-primary-active: #9f1239;
+  --silver-radii-component-md: 0.5rem;
+  --silver-fonts-body: Inter, system-ui, sans-serif;
+}
+```
+
+Variables can be scoped to containers, dark mode (`[data-theme="dark"]`), or
+individual instances via `className`/`style` props.
+
+See [THEME.md](THEME.md) for the full variable reference, dark mode details,
+scoped theming examples, and per-instance overrides.
+
+## Components
+
+### Layout & Structure
+
+- **Accordion** — collapsible content sections
+- **AppShell** — application-level layout shell with responsive mobile navigation
+- **AspectRatio** — constrains children to a fixed aspect ratio
+- **Card** — rounded container surface for grouping content
+- **Center** — centers content horizontally, vertically, or both
+- **Divider** — visual separator between sections
+- **Layout** — page shell with header, footer, side panels, and content slots
+- **HStack / VStack** — horizontal and vertical flex containers with gap
+
+### Navigation
+
+- **Breadcrumbs** — hierarchical page location trail
+- **Link** — polymorphic link with external link handling and router integration
+- **MobileNav** — slide-out drawer for mobile navigation
+- **Pagination** — page navigation controls
+- **SideNav** — vertical side navigation panel with collapsing support
+- **Tabs** — tabbed content switching
+- **TopNav** — horizontal top navigation bar
+
+### Buttons & Actions
+
+- **Button** — versatile action element supporting links, loading states, and icon-only mode
+- **ButtonGroup** — connected group of related buttons
+- **ContextMenu** — right-click context menu
+- **DropdownMenu** — button-triggered dropdown menu
+- **SegmentedControl** — mutually exclusive option selector
+- **ToggleButton** — button with pressed/unpressed state
+
+### Data Display
+
+- **Avatar** — user or entity avatar with status indicators
+- **AvatarGroup** — stacked avatar collection with overflow count
+- **Badge** — small status label with icon support
+- **Blockquote** — styled quotation block
+- **Icon** — renders Lucide icons with size and color tokens
+- **Item** — generic list item with icon, label, and description
+- **Kbd** — keyboard shortcut display with accessible labels
+- **Lightbox** — full-screen media viewer
+- **List** — ordered or unordered list with dividers
+- **MetadataList** — key-value metadata display
+- **Table** — data table with sorting, filtering, and column resize plugins
+- **Tag** — removable label for categories or filters
+- **Text / Heading** — typography primitives with size, color, and truncation
+- **Thumbnail** — image preview with fallback and remove action
+- **Tooltip** — informational popup on hover or focus
+- **TreeView** — hierarchical expandable tree
+
+### Forms
+
+- **CheckboxInput** — checkbox with label and description
+- **AutocompleteInput** — searchable autocomplete input
+- **DateInput** — date picker field
+- **DateRangeInput** — date range picker field
+- **DateTimeInput** — combined date and time picker
+- **Field** — form field wrapper with label, description, and validation
+- **FileInput** — file upload with drag-and-drop support
+- **InputGroup** — groups related form inputs with shared label
+- **MultiSelect** — multi-value dropdown selector
+- **NumberInput** — numeric input with increment/decrement
+- **PasswordInput** — text input with show/hide toggle
+- **RadioGroup** — radio button group
+- **Rating** — star rating input
+- **SearchFilterInput** — search input with structured filter tags
+- **Select** — single-value dropdown selector
+- **Slider** — range slider with marks and labels
+- **Switch** — toggle switch
+- **TagsInput** — free-form tag entry field
+- **TextArea** — multi-line text input
+- **TextInput** — single-line text input
+- **TimeInput** — time picker field
+
+### Feedback & Status
+
+- **Alert** — dismissable notification banner
+- **EmptyState** — placeholder for empty content areas
+- **Progress** — determinate progress bar
+- **Skeleton** — loading placeholder with pulse animation
+- **Spinner** — indeterminate loading indicator
+- **Stepper** — multi-step progress indicator
+- **Toast** — temporary notification popup
+
+### Overlays
+
+- **AlertDialog** — confirmation dialog requiring explicit action
+- **Dialog** — modal dialog with header and content
+- **Drawer** — slide-in panel from screen edge
+- **HoverCard** — rich content popup on hover
+- **Popover** — anchored popup with arbitrary content
+
+### Composite
+
+- **Calendar** — date picker calendar grid with single and range selection
+- **Schedule** — event calendar with day, week, month, and list views
+
+---
+
+## Contributing
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) >= 18
+- [pnpm](https://pnpm.io/) >= 9
+
+### Setup
+
+```bash
+git clone <repo-url>
+cd silver-ui
+pnpm install
+```
+
+This runs `panda codegen` automatically via the `prepare` script.
+
+### Development
+
+Start Storybook for interactive component development:
+
+```bash
+pnpm dev
+```
+
+This launches Storybook at `http://localhost:6006`.
+
+### Scripts
+
+| Script                 | Description                  |
+| ---------------------- | ---------------------------- |
+| `pnpm storybook`       | Start Storybook dev server   |
+| `pnpm build`           | Build the library (JS + CSS) |
+| `pnpm build:storybook` | Build static Storybook site  |
+| `pnpm test`            | Run tests                    |
+| `pnpm test:watch`      | Run tests in watch mode      |
+| `pnpm lint`            | Run ESLint                   |
+| `pnpm lint:fix`        | Run ESLint with auto-fix     |
+| `pnpm format`          | Format code with Prettier    |
+| `pnpm format:check`    | Check formatting             |
+| `pnpm typecheck`       | Type-check with TypeScript   |
+| `pnpm clean`           | Remove build artifacts       |
+
+### Adding a new component
+
+1. Create a directory: `src/components/MyComponent/`
+2. Add the recipe file (`MyComponent.recipe.ts`) using `cva` or `sva`
+3. Add the component file (`MyComponent.tsx`) — must accept `className`, `style`, and `ref`
+4. Add tests (`MyComponent.test.tsx`) and stories (`MyComponent.stories.tsx`)
+5. Add a barrel export (`index.ts`) and re-export from `src/index.ts`
+
+### Pre-commit hooks
+
+Commits automatically run:
+
+- **ESLint** on staged `.ts`/`.tsx` files
+- **Prettier** on staged files
+- **TypeScript** type-checking on the full project
+
+### Build output
+
+`pnpm build` produces:
+
+- `dist/index.js` — ESM bundle
+- `dist/index.cjs` — CJS bundle
+- `dist/index.d.ts` — TypeScript declarations
+- `dist/styles.css` — All component styles (import this in consuming apps)
+
+## License
+
+MIT

package/dist/chunk-25OAUQRF.cjs

@@ -0,0 +1,151 @@
+'use strict';
+
+var chunkI6IGTQLG_cjs = require('./chunk-I6IGTQLG.cjs');
+var chunk5G3BY75L_cjs = require('./chunk-5G3BY75L.cjs');
+var chunk2WP6NYYY_cjs = require('./chunk-2WP6NYYY.cjs');
+var chunk47BELFYO_cjs = require('./chunk-47BELFYO.cjs');
+var chunkPHFEQG4E_cjs = require('./chunk-PHFEQG4E.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var styles = {
+  wrapper: chunkAZDWQGAX_cjs.css({
+    alignItems: "flex-start",
+    py: "2"
+  }),
+  textarea: chunkAZDWQGAX_cjs.css({
+    resize: "vertical",
+    minH: "20"
+  }),
+  counter: chunkAZDWQGAX_cjs.css({
+    alignSelf: "flex-end",
+    mt: "1"
+  }),
+  counterOverLimit: chunkAZDWQGAX_cjs.css({
+    color: "status.error.fg"
+  })
+};
+function TextArea({
+  label,
+  value,
+  onChange,
+  rows = 3,
+  size = "md",
+  description,
+  isLabelHidden = false,
+  isOptional,
+  isRequired,
+  isDisabled = false,
+  isLoading = false,
+  hasSpellCheck = true,
+  hasAutoFocus = false,
+  htmlName,
+  status,
+  labelIcon,
+  labelTooltip,
+  startIcon,
+  placeholder,
+  maxLength,
+  onPaste,
+  onFocus,
+  onBlur,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const inputId = react.useId();
+  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const statusMessageID = chunk5G3BY75L_cjs.getStatusMessageID(inputId, status);
+  const counterID = maxLength != null ? `${inputId}-counter` : void 0;
+  const describedBy = chunk5G3BY75L_cjs.getDescribedBy(descriptionID, statusMessageID, counterID);
+  const isOverLimit = maxLength != null && value.length > maxLength;
+  const necessity = { isOptional, isRequired };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkI6IGTQLG_cjs.Field,
+    {
+      className,
+      description,
+      descriptionID,
+      inputId,
+      isDisabled,
+      isLabelHidden,
+      ...necessity,
+      label,
+      labelIcon,
+      labelTooltip,
+      status: status == null ? void 0 : { ...status, messageID: statusMessageID },
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: chunkSPDVNY2Z_cjs.cx(
+              chunkI6IGTQLG_cjs.inputRecipe({
+                size,
+                status: status?.type,
+                isDisabled
+              }),
+              styles.wrapper
+            ),
+            children: [
+              startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkI6IGTQLG_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  "aria-busy": isLoading || void 0,
+                  "aria-describedby": describedBy,
+                  "aria-invalid": status?.type === "error" || isOverLimit || void 0,
+                  "aria-required": isRequired ?? void 0,
+                  autoFocus: hasAutoFocus,
+                  className: chunkSPDVNY2Z_cjs.cx(chunkI6IGTQLG_cjs.inputStyles.control, styles.textarea),
+                  "data-autofocus": hasAutoFocus || void 0,
+                  "data-testid": dataTestId,
+                  disabled: isDisabled,
+                  id: inputId,
+                  name: htmlName,
+                  onBlur,
+                  onChange: (event) => onChange(event.target.value, event),
+                  onFocus,
+                  onPaste,
+                  placeholder,
+                  ref,
+                  rows,
+                  spellCheck: hasSpellCheck,
+                  value
+                }
+              ),
+              isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk2WP6NYYY_cjs.Spinner, { size: "sm" }) : null,
+              status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkI6IGTQLG_cjs.inputStyles.iconSlot, children: chunk5G3BY75L_cjs.getStatusIcon(status.type) }) : null
+            ]
+          }
+        ),
+        maxLength != null ? /* @__PURE__ */ jsxRuntime.jsxs(
+          chunk47BELFYO_cjs.Text,
+          {
+            as: "span",
+            className: chunkSPDVNY2Z_cjs.cx(
+              styles.counter,
+              isOverLimit ? styles.counterOverLimit : void 0
+            ),
+            color: "secondary",
+            id: counterID,
+            type: "supporting",
+            children: [
+              value.length,
+              "/",
+              maxLength
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+TextArea.displayName = "TextArea";
+
+exports.TextArea = TextArea;
+//# sourceMappingURL=chunk-25OAUQRF.cjs.map
+//# sourceMappingURL=chunk-25OAUQRF.cjs.map

package/dist/chunk-25OAUQRF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TextArea/TextArea.tsx"],"names":["css","useId","getStatusMessageID","getDescribedBy","jsxs","Field","cx","inputRecipe","jsx","inputStyles","Icon","Spinner","getStatusIcon","Text"],"mappings":"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","file":"chunk-25OAUQRF.cjs","sourcesContent":["import {\n  useId,\n  type ChangeEvent,\n  type CSSProperties,\n  type ClipboardEvent,\n  type FocusEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {\n  Field,\n  inputRecipe,\n  inputStyles,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport {\n  getDescribedBy,\n  getStatusIcon,\n  getStatusMessageID,\n} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\nimport {Text} from '../Text';\n\nexport type TextAreaProps = {\n  /**\n   * Additional CSS class names applied to the textarea wrapper.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the textarea element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether to focus the textarea on mount.\n   * @default false\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * Whether the browser spellcheck is enabled.\n   * @default true\n   */\n  hasSpellCheck?: boolean;\n  /**\n   * HTML name attribute.\n   */\n  htmlName?: string;\n  /**\n   * Whether the textarea is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the textarea is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Field label.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Maximum character count. Displays a counter when set.\n   */\n  maxLength?: number;\n  /**\n   * Called when the textarea loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Called with the next string value.\n   */\n  onChange: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Called when the textarea receives focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Called when content is pasted into the textarea.\n   */\n  onPaste?: (event: ClipboardEvent<HTMLTextAreaElement>) => void;\n  /**\n   * Placeholder text.\n   */\n  placeholder?: string;\n  /**\n   * Ref forwarded to the textarea element.\n   */\n  ref?: Ref<HTMLTextAreaElement>;\n  /**\n   * Number of visible text rows.\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * Visual size.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Icon shown before the textarea.\n   */\n  startIcon?: IconComponent;\n  /**\n   * Validation status displayed below the textarea.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the textarea wrapper.\n   */\n  style?: CSSProperties;\n  /**\n   * Controlled textarea value.\n   */\n  value: string;\n} & FieldNecessity;\n\nconst styles = {\n  wrapper: css({\n    alignItems: 'flex-start',\n    py: '2',\n  }),\n  textarea: css({\n    resize: 'vertical',\n    minH: '20',\n  }),\n  counter: css({\n    alignSelf: 'flex-end',\n    mt: '1',\n  }),\n  counterOverLimit: css({\n    color: 'status.error.fg',\n  }),\n} as const;\n\n/**\n * Multi-line text input field with optional character counter.\n */\nexport function TextArea({\n  label,\n  value,\n  onChange,\n  rows = 3,\n  size = 'md',\n  description,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isLoading = false,\n  hasSpellCheck = true,\n  hasAutoFocus = false,\n  htmlName,\n  status,\n  labelIcon,\n  labelTooltip,\n  startIcon,\n  placeholder,\n  maxLength,\n  onPaste,\n  onFocus,\n  onBlur,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: TextAreaProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID =\n    description != null ? `${inputId}-description` : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const counterID = maxLength != null ? `${inputId}-counter` : undefined;\n  const describedBy = getDescribedBy(descriptionID, statusMessageID, counterID);\n  const isOverLimit = maxLength != null && value.length > maxLength;\n\n  const necessity: FieldNecessity = {isOptional, isRequired};\n\n  return (\n    <Field\n      className={className}\n      description={description}\n      descriptionID={descriptionID}\n      inputId={inputId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={\n        status == null ? undefined : {...status, messageID: statusMessageID}\n      }\n      style={style}>\n      <div\n        className={cx(\n          inputRecipe({\n            size,\n            status: status?.type,\n            isDisabled,\n          }),\n          styles.wrapper,\n        )}>\n        {startIcon != null ? (\n          <span className={inputStyles.iconSlot}>\n            <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n          </span>\n        ) : null}\n        <textarea\n          aria-busy={isLoading || undefined}\n          aria-describedby={describedBy}\n          aria-invalid={status?.type === 'error' || isOverLimit || undefined}\n          aria-required={isRequired ?? undefined}\n          // eslint-disable-next-line jsx-a11y-x/no-autofocus\n          autoFocus={hasAutoFocus}\n          className={cx(inputStyles.control, styles.textarea)}\n          data-autofocus={hasAutoFocus || undefined}\n          data-testid={dataTestId}\n          disabled={isDisabled}\n          id={inputId}\n          name={htmlName}\n          onBlur={onBlur}\n          onChange={event => onChange(event.target.value, event)}\n          onFocus={onFocus}\n          onPaste={onPaste}\n          placeholder={placeholder}\n          ref={ref}\n          rows={rows}\n          spellCheck={hasSpellCheck}\n          value={value}\n        />\n        {isLoading ? <Spinner size=\"sm\" /> : null}\n        {status != null ? (\n          <span className={inputStyles.iconSlot}>\n            {getStatusIcon(status.type)}\n          </span>\n        ) : null}\n      </div>\n      {maxLength != null ? (\n        <Text\n          as=\"span\"\n          className={cx(\n            styles.counter,\n            isOverLimit ? styles.counterOverLimit : undefined,\n          )}\n          color=\"secondary\"\n          id={counterID}\n          type=\"supporting\">\n          {value.length}/{maxLength}\n        </Text>\n      ) : null}\n    </Field>\n  );\n}\n\nTextArea.displayName = 'TextArea';\n"]}