@pathscale/ui 1.2.10 → 1.3.0

package/LICENSE

@@ -1,22 +1,22 @@
-MIT License
-
-Copyright (c) 2025 pathscale
-Copyright (c) 2020 Pouya Saadeghi
-
-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.
+MIT License
+
+Copyright (c) 2025 pathscale
+Copyright (c) 2020 Pouya Saadeghi
+
+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

@@ -1,59 +1,132 @@
-# @pathscale/ui
-
-Highly opinionated SolidJS component library — batteries and kitchen sink
-included, but optimized and shiny.
-
-## Install
-
-```sh
-bun add @pathscale/ui
-```
-
-## Usage
-
-```tsx
-import { Button, Flex } from "@pathscale/ui";
-
-export const Example = () => (
-  <Flex direction="col" gap="sm">
-    <Button color="primary">Primary</Button>
-  </Flex>
-);
-```
-
-## CSS
-
-Import the compatibility stylesheet to use `@pathscale/ui` components without
-relying on app-level DaisyUI plugin styles:
-
-```ts
-import "@pathscale/ui/dist/styles/compat/daisy-primitives.css";
-import "@pathscale/ui/dist/styles/icons/generated-icons.css";
-```
-
-## Motion
-
-Shared animation primitives live in `@pathscale/ui/motion`. For setup,
-Popmotion driver enablement, and migration notes, see `docs/motion.md`.
-
-## Development
-
-```sh
-bun run build
-```
-
-Other useful scripts:
-
-- `bun run dev`
-- `bun run lint`
-- `bun run format`
-
-## Playground Hot Test
-
-Run the playground from the repository root and hot-test local library changes without rebuilding:
-
-```sh
-bun run playground:dev
-```
-
-The playground resolves `@pathscale/ui` to local `src` via Vite aliases, so edits in `/src` and `/src/styles` refresh immediately.
+# @pathscale/ui
+
+Highly opinionated SolidJS component library — batteries and kitchen sink included, but
+optimized and shiny.
+
+**103 components.** HeroUI-parity API, daisyUI-style theming, Tailwind v4 tokens, light and
+dark themes built in.
+
+**[→ Browse every component, live](https://js.software)**
+
+## Install
+
+```sh
+bun add @pathscale/ui
+```
+
+<details>
+<summary>npm · pnpm · yarn</summary>
+
+```sh
+npm install @pathscale/ui
+pnpm add @pathscale/ui
+yarn add @pathscale/ui
+```
+
+</details>
+
+## Setup
+
+Two imports. Everything comes from the root barrel, and **one stylesheet is all you need** —
+`index.css` pulls in the base styles, both themes and the icon set:
+
+```tsx
+import { Button, Flex } from "@pathscale/ui";
+import "@pathscale/ui/index.css";
+
+export const Example = () => (
+  <Flex direction="col" gap="sm">
+    <Button color="primary" size="md">Primary</Button>
+  </Flex>
+);
+```
+
+## Theming
+
+Two themes ship with the library: `light` (the default when no attribute is set) and `dark`.
+Switch globally by setting an attribute on the document:
+
+```ts
+document.documentElement.setAttribute("data-theme", "dark");
+```
+
+Every component also accepts a `dataTheme` prop, rendered as `data-theme` on that element —
+use it to scope a theme to one subtree.
+
+Tokens are CSS custom properties: `--color-primary`, `--color-base-100`, `--radius-field`,
+and a glass set among others. `index.css` includes a Tailwind v4 `@theme` block, so in a
+Tailwind v4 app the usual utilities — `bg-primary`, `text-base-content`, `bg-base-100` —
+work against them directly.
+
+## Components
+
+| family | components |
+|---|---|
+| **Layout** | Flex, Grid, Join, Surface, Card, GlassPanel, Separator, ScrollShadow, Skeleton, EmptyState, Footer, Header, Navbar, Toolbar, FloatingDock |
+| **Typography & misc** | Text, Link, Kbd, Badge, Chip, Tag, TagGroup, Avatar, Icon, Tooltip, Breadcrumbs, Pagination, Meter, ProgressBar, ProgressCircle, Spinner |
+| **Inputs** | Input, InputGroup, InputOTP, TextField, TextArea, NumberField, SearchField, PasswordField, ColorField, Checkbox, CheckboxGroup, Radio, RadioGroup, Toggle, Slider, Select, ComboBox, ListBox, SizePicker |
+| **Forms** | Form, Fieldset, Label, Description, ErrorMessage, FieldError, PasswordRequirements |
+| **Dates** | Calendar, RangeCalendar, DatePicker, DateRangePicker, DateField, TimeField |
+| **Color** | ColorPicker, ColorArea, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheelFlower, ThemeColorPicker |
+| **Overlays** | Modal, Drawer, Popover, Dropdown, Menu, Toast, Alert, Disclosure, DisclosureGroup, Accordion |
+| **Data** | Table (headless compound + hooks), Tabs |
+| **Auth kit** | AuthForm, AuthCard, AuthFieldGroup, AuthSubmitButton, AuthFooterLinks, AuthPoweredBy, AuthErrorMessage, AuthSuccessMessage |
+| **Visual FX** | MetalBorder, GlowCard, NoiseBackground, ImmersiveLanding, VideoPreview, LiveChat, ChatBubble, LanguageSwitcher |
+
+All of them rendered and interactive at **[js.software](https://js.software)**.
+
+## Conventions
+
+The rules that hold across every component — worth two minutes before your first hour:
+
+- **Booleans are HeroUI-style `is*`**: `isDisabled`, `isOpen`, `isInvalid`, `isPending`,
+  `isIconOnly`. Native `disabled` is honored too.
+- **Sizes** are `xs | sm | md | lg | xl`. **Colors** are
+  `neutral | primary | secondary | accent | info | success | warning | error | ghost`.
+- **Both `class` and `className` work** everywhere, and your classes win — they are merged
+  last via twMerge.
+- **Controlled/uncontrolled come in triples**: `isOpen/defaultOpen/onOpenChange`,
+  `value/defaultValue/onChange`. Callbacks pass **values, not events**.
+- **Compound components** (`Modal.Trigger`, `Tabs.List`, `Select.Option`) are also exported
+  flat. Parts are styleable via `data-slot` and state attributes such as `data-open`.
+- There is **no polymorphic `as` prop**.
+
+Forms are TanStack Form plus any Standard Schema validator; Table is headless and assembled
+from hooks. Both, with toasts, icons and dates, are covered in
+**[docs/ui-usage.md](https://github.com/pathscale/ui/blob/master/docs/ui-usage.md)**.
+
+## Requirements
+
+- **SolidJS ^1.9**
+- **Tailwind v4** — optional, but required for the `@theme` token utilities
+
+Peers include `@solid-primitives/*`, `@tanstack/solid-form` and `@tanstack/solid-table`.
+Two are optional and only needed for the features they back: `popmotion` (JS animation
+driver) and `@standard-schema/spec` (schema validation).
+
+## Subpath exports
+
+Everything is available from the root barrel. These exist when you want to be narrower:
+
+```ts
+import { Button } from "@pathscale/ui/components/button";
+import { useVirtualRows } from "@pathscale/ui/primitives/virtualizer";
+import { runMotion, enablePopmotion } from "@pathscale/ui/motion";
+```
+
+Also `@pathscale/ui/hooks/*` and `@pathscale/ui/styles/*`.
+
+The package declares `"sideEffects": ["**/*.css"]`, so bundlers tree-shake what you don't
+import — the published size is the whole library, not what ships to your users.
+
+## Documentation
+
+| | |
+|---|---|
+| **[Live showcase](https://js.software)** | every component, rendered and interactive |
+| **[Usage reference](https://github.com/pathscale/ui/blob/master/docs/ui-usage.md)** | theming, conventions, forms, table, toast, icons, dates |
+| **[Contributing](https://github.com/pathscale/ui/blob/master/CONTRIBUTING.md)** | local setup, playground, component checklist, proposal template |
+
+## License
+
+MIT

package/dist/components/accordion/Accordion.css

@@ -1,158 +1,158 @@
-@layer components {
-  .accordion {
-    width: 100%;
-    contain: layout style;
-  }
-
-  .accordion__item {
-    position: relative;
-    border: 0;
-  }
-
-  .accordion__item::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    border-radius: 9999px;
-    background-color: var(--color-base-300);
-  }
-
-  .accordion__item:last-child::after {
-    content: none;
-  }
-
-  .accordion__item--hide-separator::after {
-    display: none;
-  }
-
-  .accordion__item--disabled {
-    opacity: 0.65;
-  }
-
-  .accordion__trigger {
-    cursor: pointer;
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-    border: 0;
-    background-color: transparent;
-    padding: 1rem;
-    text-align: left;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: inherit;
-    user-select: none;
-    transition:
-      opacity 150ms ease,
-      background-color 150ms ease,
-      box-shadow 150ms ease;
-  }
-
-  .accordion__trigger:focus-visible,
-  .accordion__trigger[data-focus-visible="true"] {
-    outline: 2px solid var(--color-base-content);
-    outline-offset: 2px;
-  }
-
-  .accordion__item--disabled .accordion__trigger,
-  .accordion__trigger:disabled,
-  .accordion__trigger[aria-disabled="true"] {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-
-  @media (hover: hover) {
-    .accordion__trigger:hover:not([aria-expanded="true"]):not(:disabled):not(
-        [aria-disabled="true"]
-      ),
-    .accordion__trigger[data-hovered="true"]:not(
-        [aria-expanded="true"]
-      ):not(:disabled):not([aria-disabled="true"]) {
-      background-color: color-mix(
-        in oklab,
-        var(--color-base-content),
-        transparent 96%
-      );
-    }
-  }
-
-  .accordion__indicator {
-    margin-inline-start: auto;
-    height: 1rem;
-    width: 1rem;
-    flex-shrink: 0;
-    opacity: 0.65;
-    transition: transform 250ms ease;
-  }
-
-  .accordion__indicator--expanded {
-    transform: rotate(-180deg);
-  }
-
-  .accordion__content {
-    display: grid;
-    grid-template-rows: 0fr;
-    opacity: 0;
-    overflow: hidden;
-    transition:
-      grid-template-rows 200ms ease,
-      opacity 200ms ease;
-  }
-
-  .accordion__content--expanded {
-    grid-template-rows: 1fr;
-    opacity: 1;
-  }
-
-  .accordion__body {
-    min-height: 0;
-    overflow: hidden;
-    font-size: 0.875rem;
-  }
-
-  .accordion__body-inner {
-    padding-inline: 1rem;
-    padding-top: 0;
-    padding-bottom: 1rem;
-    color: color-mix(in oklab, var(--color-base-content), transparent 25%);
-  }
-
-  .accordion--surface {
-    border-radius: 1.5rem;
-    background-color: var(--color-base-100);
-  }
-
-  .accordion--surface .accordion__item::after {
-    left: 3%;
-    width: 94%;
-    background-color: color-mix(
-      in oklab,
-      var(--color-base-content),
-      transparent 90%
-    );
-  }
-
-  .accordion--surface .accordion__item:first-child .accordion__trigger {
-    border-top-left-radius: 1.5rem;
-    border-top-right-radius: 1.5rem;
-  }
-
-  .accordion--surface
-    .accordion__item:last-child:not(.accordion__item--expanded)
-    .accordion__trigger {
-    border-bottom-left-radius: 1.5rem;
-    border-bottom-right-radius: 1.5rem;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .accordion__trigger,
-    .accordion__indicator,
-    .accordion__content {
-      transition: none;
-    }
-  }
-}
+@layer components {
+  .accordion {
+    width: 100%;
+    contain: layout style;
+  }
+
+  .accordion__item {
+    position: relative;
+    border: 0;
+  }
+
+  .accordion__item::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    border-radius: 9999px;
+    background-color: var(--color-base-300);
+  }
+
+  .accordion__item:last-child::after {
+    content: none;
+  }
+
+  .accordion__item--hide-separator::after {
+    display: none;
+  }
+
+  .accordion__item--disabled {
+    opacity: 0.65;
+  }
+
+  .accordion__trigger {
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    border: 0;
+    background-color: transparent;
+    padding: 1rem;
+    text-align: left;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: inherit;
+    user-select: none;
+    transition:
+      opacity 150ms ease,
+      background-color 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .accordion__trigger:focus-visible,
+  .accordion__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+  }
+
+  .accordion__item--disabled .accordion__trigger,
+  .accordion__trigger:disabled,
+  .accordion__trigger[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  @media (hover: hover) {
+    .accordion__trigger:hover:not([aria-expanded="true"]):not(:disabled):not(
+        [aria-disabled="true"]
+      ),
+    .accordion__trigger[data-hovered="true"]:not(
+        [aria-expanded="true"]
+      ):not(:disabled):not([aria-disabled="true"]) {
+      background-color: color-mix(
+        in oklab,
+        var(--color-base-content),
+        transparent 96%
+      );
+    }
+  }
+
+  .accordion__indicator {
+    margin-inline-start: auto;
+    height: 1rem;
+    width: 1rem;
+    flex-shrink: 0;
+    opacity: 0.65;
+    transition: transform 250ms ease;
+  }
+
+  .accordion__indicator--expanded {
+    transform: rotate(-180deg);
+  }
+
+  .accordion__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    overflow: hidden;
+    transition:
+      grid-template-rows 200ms ease,
+      opacity 200ms ease;
+  }
+
+  .accordion__content--expanded {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+
+  .accordion__body {
+    min-height: 0;
+    overflow: hidden;
+    font-size: 0.875rem;
+  }
+
+  .accordion__body-inner {
+    padding-inline: 1rem;
+    padding-top: 0;
+    padding-bottom: 1rem;
+    color: color-mix(in oklab, var(--color-base-content), transparent 25%);
+  }
+
+  .accordion--surface {
+    border-radius: 1.5rem;
+    background-color: var(--color-base-100);
+  }
+
+  .accordion--surface .accordion__item::after {
+    left: 3%;
+    width: 94%;
+    background-color: color-mix(
+      in oklab,
+      var(--color-base-content),
+      transparent 90%
+    );
+  }
+
+  .accordion--surface .accordion__item:first-child .accordion__trigger {
+    border-top-left-radius: 1.5rem;
+    border-top-right-radius: 1.5rem;
+  }
+
+  .accordion--surface
+    .accordion__item:last-child:not(.accordion__item--expanded)
+    .accordion__trigger {
+    border-bottom-left-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .accordion__trigger,
+    .accordion__indicator,
+    .accordion__content {
+      transition: none;
+    }
+  }
+}