@pathscale/ui 1.2.11 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,12 @@
1
1
  # @pathscale/ui
2
2
 
3
- Highly opinionated SolidJS component library — batteries and kitchen sink
4
- included, but optimized and shiny.
3
+ Highly opinionated SolidJS component library — batteries and kitchen sink included, but
4
+ optimized and shiny.
5
+
6
+ **103 components.** HeroUI-parity API, daisyUI-style theming, Tailwind v4 tokens, light and
7
+ dark themes built in.
8
+
9
+ **[→ Browse every component, live](https://js.software)**
5
10
 
6
11
  ## Install
7
12
 
@@ -9,51 +14,123 @@ included, but optimized and shiny.
9
14
  bun add @pathscale/ui
10
15
  ```
11
16
 
12
- ## Usage
17
+ <details>
18
+ <summary>npm · pnpm · yarn</summary>
19
+
20
+ ```sh
21
+ npm install @pathscale/ui
22
+ pnpm add @pathscale/ui
23
+ yarn add @pathscale/ui
24
+ ```
25
+
26
+ </details>
27
+
28
+ ## Setup
29
+
30
+ Two imports. Everything comes from the root barrel, and **one stylesheet is all you need** —
31
+ `index.css` pulls in the base styles, both themes and the icon set:
13
32
 
14
33
  ```tsx
15
34
  import { Button, Flex } from "@pathscale/ui";
35
+ import "@pathscale/ui/index.css";
16
36
 
17
37
  export const Example = () => (
18
38
  <Flex direction="col" gap="sm">
19
- <Button color="primary">Primary</Button>
39
+ <Button variant="primary" size="md">Primary</Button>
20
40
  </Flex>
21
41
  );
22
42
  ```
23
43
 
24
- ## CSS
44
+ ## Theming
25
45
 
26
- Import the compatibility stylesheet to use `@pathscale/ui` components without
27
- relying on app-level DaisyUI plugin styles:
46
+ Two themes ship with the library: `light` (the default when no attribute is set) and `dark`.
47
+ Switch globally by setting an attribute on the document:
28
48
 
29
49
  ```ts
30
- import "@pathscale/ui/dist/styles/compat/daisy-primitives.css";
31
- import "@pathscale/ui/dist/styles/icons/generated-icons.css";
50
+ document.documentElement.setAttribute("data-theme", "dark");
32
51
  ```
33
52
 
34
- ## Motion
53
+ Every component also accepts a `dataTheme` prop, rendered as `data-theme` on that element —
54
+ use it to scope a theme to one subtree.
35
55
 
36
- Shared animation primitives live in `@pathscale/ui/motion`. For setup,
37
- Popmotion driver enablement, and migration notes, see `docs/motion.md`.
56
+ Tokens are CSS custom properties: `--color-primary`, `--color-base-100`, `--radius-field`,
57
+ and a glass set among others. `index.css` includes a Tailwind v4 `@theme` block, so in a
58
+ Tailwind v4 app the usual utilities — `bg-primary`, `text-base-content`, `bg-base-100` —
59
+ work against them directly.
38
60
 
39
- ## Development
61
+ ## Components
40
62
 
41
- ```sh
42
- bun run build
43
- ```
63
+ | family | components |
64
+ |---|---|
65
+ | **Layout** | Flex, Grid, Join, Surface, Card, GlassPanel, Separator, ScrollShadow, Skeleton, EmptyState, Footer, Header, Navbar, Toolbar, FloatingDock |
66
+ | **Typography & misc** | Text, Link, Kbd, Badge, Chip, Tag, TagGroup, Avatar, Icon, Tooltip, Breadcrumbs, Pagination, Meter, ProgressBar, ProgressCircle, Spinner |
67
+ | **Inputs** | Input, InputGroup, InputOTP, TextField, TextArea, NumberField, SearchField, PasswordField, ColorField, Checkbox, CheckboxGroup, Radio, RadioGroup, Toggle, Slider, Select, ComboBox, ListBox, SizePicker |
68
+ | **Forms** | Form, Fieldset, Label, Description, ErrorMessage, FieldError, PasswordRequirements |
69
+ | **Dates** | Calendar, RangeCalendar, DatePicker, DateRangePicker, DateField, TimeField |
70
+ | **Color** | ColorPicker, ColorArea, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheelFlower, ThemeColorPicker |
71
+ | **Overlays** | Modal, Drawer, Popover, Dropdown, Menu, Toast, Alert, Disclosure, DisclosureGroup, Accordion |
72
+ | **Data** | Table (headless compound + hooks), Tabs |
73
+ | **Auth kit** | AuthForm, AuthCard, AuthFieldGroup, AuthSubmitButton, AuthFooterLinks, AuthPoweredBy, AuthErrorMessage, AuthSuccessMessage |
74
+ | **Visual FX** | MetalBorder, GlowCard, NoiseBackground, ImmersiveLanding, VideoPreview, LiveChat, ChatBubble, LanguageSwitcher |
44
75
 
45
- Other useful scripts:
76
+ All of them rendered and interactive at **[js.software](https://js.software)**.
46
77
 
47
- - `bun run dev`
48
- - `bun run lint`
49
- - `bun run format`
78
+ ## Conventions
50
79
 
51
- ## Playground Hot Test
80
+ The rules that hold across every component — worth two minutes before your first hour:
52
81
 
53
- Run the playground from the repository root and hot-test local library changes without rebuilding:
82
+ - **Booleans are HeroUI-style `is*`**: `isDisabled`, `isOpen`, `isInvalid`, `isPending`,
83
+ `isIconOnly`. Native `disabled` is honored too.
84
+ - **Sizes and variants are per-component.** `Button` takes
85
+ `variant` (`primary | secondary | tertiary | outline | ghost | danger | danger-soft`)
86
+ and `size` (`sm | md | lg`); a smaller set of components — `Badge`, `Chip`, `Avatar`,
87
+ `Spinner`, `Toggle`, the progress components — take `color` instead. Check the
88
+ component's own types, or the [showcase](https://js.software), rather than assuming a
89
+ shared union.
90
+ - **Both `class` and `className` work** everywhere, and your classes win — they are merged
91
+ last via twMerge.
92
+ - **Controlled/uncontrolled come in triples**: `isOpen/defaultOpen/onOpenChange`,
93
+ `value/defaultValue/onChange`. Callbacks pass **values, not events**.
94
+ - **Compound components** (`Modal.Trigger`, `Tabs.List`, `Select.Option`) are also exported
95
+ flat. Parts are styleable via `data-slot` and state attributes such as `data-open`.
96
+ - There is **no polymorphic `as` prop**.
54
97
 
55
- ```sh
56
- bun run playground:dev
98
+ Forms are TanStack Form plus any Standard Schema validator; Table is headless and assembled
99
+ from hooks. Both, with toasts, icons and dates, are covered in
100
+ **[docs/ui-usage.md](https://github.com/pathscale/ui/blob/master/docs/ui-usage.md)**.
101
+
102
+ ## Requirements
103
+
104
+ - **SolidJS ^1.9**
105
+ - **Tailwind v4** — optional, but required for the `@theme` token utilities
106
+
107
+ Peers include `@solid-primitives/*`, `@tanstack/solid-form` and `@tanstack/solid-table`.
108
+ Two are optional and only needed for the features they back: `popmotion` (JS animation
109
+ driver) and `@standard-schema/spec` (schema validation).
110
+
111
+ ## Subpath exports
112
+
113
+ Everything is available from the root barrel. These exist when you want to be narrower:
114
+
115
+ ```ts
116
+ import { Button } from "@pathscale/ui/components/button";
117
+ import { useVirtualRows } from "@pathscale/ui/primitives/virtualizer";
118
+ import { runMotion, enablePopmotion } from "@pathscale/ui/motion";
57
119
  ```
58
120
 
59
- The playground resolves `@pathscale/ui` to local `src` via Vite aliases, so edits in `/src` and `/src/styles` refresh immediately.
121
+ Also `@pathscale/ui/hooks/*` and `@pathscale/ui/styles/*`.
122
+
123
+ The package declares `"sideEffects": ["**/*.css"]`, so bundlers tree-shake what you don't
124
+ import — the published size is the whole library, not what ships to your users.
125
+
126
+ ## Documentation
127
+
128
+ | | |
129
+ |---|---|
130
+ | **[Live showcase](https://js.software)** | every component, rendered and interactive |
131
+ | **[Usage reference](https://github.com/pathscale/ui/blob/master/docs/ui-usage.md)** | theming, conventions, forms, table, toast, icons, dates |
132
+ | **[Contributing](https://github.com/pathscale/ui/blob/master/CONTRIBUTING.md)** | local setup, playground, component checklist, proposal template |
133
+
134
+ ## License
135
+
136
+ MIT
@@ -63,7 +63,8 @@ export interface I18nStore {
63
63
  }
64
64
  /**
65
65
  * Creates an i18n store with configurable options.
66
- * API matches nofilter.io's i18nStore for easy migration.
66
+ * API matches the i18nStore pattern used across consuming apps, so migrating
67
+ * an existing store to this one is a drop-in.
67
68
  *
68
69
  * @example
69
70
  * ```tsx