Website

.prettierrc

@@ -2,6 +2,7 @@
   "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "singleQuote": true,
   "bracketSpacing": false,
+  "tailwindConfig": "website/tailwind.config.ts",
   "overrides": [
     {
       "files": "*.svelte",

README.md

@@ -42,62 +42,9 @@ npm install ui-ingredients
 
 ## Documentation
 
-- [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
-- [Alert](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert.md)
-- [AlertDialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert-dialog.md)
-- [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
-- [Breadcrumbs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/breadcrumbs.md)
-- [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
-- [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
-- [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
-- [Collapsible](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/collapsible.md)
-- [ColorPicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/color-picker.md)
-- [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
-- [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/date-picker.md)
-- [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
-- [Drawer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/drawer.md)
-- [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
-- [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
-- [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
-- [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
-- [Highlight](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/highlight.md)
-- [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
-- [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
-- [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
-- [Pagination](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pagination.md)
-- [PinInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pin-input.md)
-- [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
-- [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
-- [Presence](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/presence.md)
-- [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
-- [QrCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
-- [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)
-- [RatingGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/rating-group.md)
-- [Select](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/select.md)
-- [SegmentGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/segment-group.md)
-- [SignaturePad](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/signature-pad.md)
-- [Slider](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/slider.md)
-- [Splitter](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/splitter.md)
-- [Steps](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/steps.md)
-- [Switch](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/switch.md)
-- [Tabs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tabs.md)
-- [TagsInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tags-input.md)
-- [TimePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/time-picker.md)
-- [Timer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/timer.md)
-- [Toast](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toast.md)
-- [Toggle](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle.md)
-- [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
-- [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
-- [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
-- [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
-- [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
-- [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
+Browse the [documentation](https://ui-ingredients.vercel.app/) to learn more about the available components and their props.
 
 ## Credits
 
 - [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
 - [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
-
-## Demo
-
-View components demo [here](https://ui-ingredients.vercel.app/)

package.json

@@ -2,24 +2,27 @@
   "name": "root",
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@9.12.3",
+  "packageManager": "pnpm@9.13.2",
   "scripts": {
     "core": "pnpm --filter ui-ingredients",
+    "website": "pnpm --filter website",
+    "scripts": "pnpm --filter scripts",
     "test": "pnpm ui-ingredients test && pnpm ui-ingredients-tailwindcss-plugin test",
     "lint": "eslint .",
     "format": "prettier --write ."
   },
   "dependencies": {
     "@types/eslint": "^9.6.1",
+    "@types/node": "^22.9.0",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-svelte": "^2.46.0",
     "globals": "^15.12.0",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
+    "prettier-plugin-svelte": "^3.2.8",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.13.0"
+    "typescript-eslint": "^8.14.0"
   }
 }

packages/core/README.md

@@ -42,62 +42,9 @@ npm install ui-ingredients
 
 ## Documentation
 
-- [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
-- [Alert](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert.md)
-- [AlertDialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert-dialog.md)
-- [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
-- [Breadcrumbs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/breadcrumbs.md)
-- [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
-- [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
-- [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
-- [Collapsible](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/collapsible.md)
-- [ColorPicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/color-picker.md)
-- [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
-- [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/date-picker.md)
-- [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
-- [Drawer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/drawer.md)
-- [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
-- [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
-- [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
-- [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
-- [Highlight](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/highlight.md)
-- [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
-- [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
-- [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
-- [Pagination](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pagination.md)
-- [PinInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pin-input.md)
-- [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
-- [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
-- [Presence](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/presence.md)
-- [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
-- [QrCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
-- [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)
-- [RatingGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/rating-group.md)
-- [Select](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/select.md)
-- [SegmentGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/segment-group.md)
-- [SignaturePad](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/signature-pad.md)
-- [Slider](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/slider.md)
-- [Splitter](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/splitter.md)
-- [Steps](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/steps.md)
-- [Switch](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/switch.md)
-- [Tabs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tabs.md)
-- [TagsInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tags-input.md)
-- [TimePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/time-picker.md)
-- [Timer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/timer.md)
-- [Toast](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toast.md)
-- [Toggle](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle.md)
-- [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
-- [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
-- [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
-- [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
-- [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
-- [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
+Browse the [documentation](https://ui-ingredients.vercel.app/) to learn more about the available components and their props.
 
 ## Credits
 
 - [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
 - [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
-
-## Demo
-
-View components demo [here](https://ui-ingredients.vercel.app/)

packages/core/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "license": "MIT",
   "version": "0.15.0",
-  "packageManager": "pnpm@9.12.3",
+  "packageManager": "pnpm@9.13.2",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -357,7 +357,7 @@
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",
     "@sveltejs/adapter-vercel": "^5.4.7",
-    "@sveltejs/kit": "^2.8.0",
+    "@sveltejs/kit": "^2.8.1",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -368,18 +368,18 @@
     "autoprefixer": "^10.4.20",
     "globals": "^15.12.0",
     "jsdom": "^25.0.1",
-    "postcss": "^8.4.48",
+    "postcss": "^8.4.49",
     "publint": "^0.2.12",
     "release-it": "^17.10.0",
     "resize-observer-polyfill": "^1.5.1",
-    "svelte": "^5.1.13",
-    "svelte-check": "^4.0.6",
+    "svelte": "^5.2.0",
+    "svelte-check": "^4.0.7",
     "tailwind-merge": "^2.5.4",
-    "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.14",
+    "tailwind-variants": "^0.3.0",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.4",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.5",
     "vitest-axe": "^1.0.0-pre.3",
     "vitest-canvas-mock": "^0.3.3"
   },

packages/core/src/routes/accordion/+page.svelte

@@ -40,13 +40,13 @@
         <span class="grow font-semibold">{label}</span>
 
         <Accordion.ItemIndicator
-          class="data-open:rotate-180 transition-all duration-200"
+          class="transition-all duration-200 data-open:rotate-180"
         >
           <ChevronDownIcon />
         </Accordion.ItemIndicator>
       </Accordion.ItemTrigger>
       <Accordion.ItemContent
-        class="text-muted data-open:animate-collapse-in data-closed:animate-collapse-out overflow-hidden [--height:1em]"
+        class="text-muted overflow-hidden [--height:1em] data-open:animate-collapse-in data-closed:animate-collapse-out"
       >
         {#snippet asChild(action, attrs)}
           <p use:action {...attrs}>{content}</p>

packages/core/src/routes/breadcrumbs/+page.svelte

@@ -5,20 +5,20 @@
 <Breadcrumbs.Root>
   <Breadcrumbs.List class="flex gap-1">
     <Breadcrumbs.Item class="contents">
-      <Breadcrumbs.Link class="aria-page:text-indigo-400 font-medium" href="#">
+      <Breadcrumbs.Link class="font-medium aria-page:text-indigo-400" href="#">
         Home
       </Breadcrumbs.Link>
       <Breadcrumbs.Separator class="opacity-35">/</Breadcrumbs.Separator>
     </Breadcrumbs.Item>
     <Breadcrumbs.Item class="contents">
-      <Breadcrumbs.Link class="aria-page:text-indigo-400 font-medium" href="#">
+      <Breadcrumbs.Link class="font-medium aria-page:text-indigo-400" href="#">
         Components
       </Breadcrumbs.Link>
       <Breadcrumbs.Separator class="opacity-35">/</Breadcrumbs.Separator>
     </Breadcrumbs.Item>
     <Breadcrumbs.Item class="contents">
       <Breadcrumbs.Link
-        class="aria-page:text-indigo-400 font-medium"
+        class="font-medium aria-page:text-indigo-400"
         href="#"
         current
       >

packages/core/src/routes/collapsible/+page.svelte

@@ -18,7 +18,7 @@
   </Collapsible.Trigger>
 
   <Collapsible.Content
-    class="data-open:animate-collapse-in data-closed:animate-collapse-out mt-3 w-full overflow-hidden rounded lg:max-w-[32rem]"
+    class="mt-3 w-full overflow-hidden rounded data-open:animate-collapse-in data-closed:animate-collapse-out lg:max-w-[32rem]"
   >
     <div class="rounded border p-4">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus odit

packages/core/src/routes/combobox/+page.svelte

@@ -63,7 +63,7 @@
       {#snippet asChild(attrs)}
         <IconButton {...attrs}>
           <ChevronDownIcon
-            class="group-data-open:rotate-180 transition-transform duration-200"
+            class="transition-transform duration-200 group-data-open:rotate-180"
           />
         </IconButton>
       {/snippet}
@@ -80,12 +80,12 @@
   <Portal>
     <Combobox.Positioner>
       <Combobox.Content
-        class="data-open:animate-fade-in data-closed:animate-fade-out bg-light rounded border p-2"
+        class="bg-light rounded border p-2 data-open:animate-fade-in data-closed:animate-fade-out"
       >
         {#each collection.items as item}
           <Combobox.Item
             {item}
-            class="data-disabled:cursor-not-allowed data-disabled:text-disabled data-highlighted:bg-lighter/50 flex cursor-default items-center rounded px-2.5 py-1"
+            class="data-disabled:text-disabled data-highlighted:bg-lighter/50 flex cursor-default items-center rounded px-2.5 py-1 data-disabled:cursor-not-allowed"
           >
             <Combobox.ItemText class="grow">{item.label}</Combobox.ItemText>
             <Combobox.ItemIndicator>

packages/core/src/routes/date-picker/+page.svelte

@@ -45,7 +45,7 @@
     <Portal>
       <DatePicker.Positioner>
         <DatePicker.Content
-          class="bg-light data-open:animate-fade-in data-closed:animate-fade-out overflow-hidden rounded"
+          class="bg-light overflow-hidden rounded data-open:animate-fade-in data-closed:animate-fade-out"
         >
           <DatePicker.View view="day">
             <DatePicker.ViewControl
@@ -92,7 +92,7 @@
                       {#each week as day}
                         <DatePicker.DayTableCell value={day}>
                           <DatePicker.DayTableCellTrigger
-                            class="data-disabled:opacity-50 data-selected:font-semibold data-selected:text-accent hover:bg-lighter/25 data-disabled:hover:bg-transparent data-disabled:cursor-not-allowed flex aspect-square w-full items-center justify-center rounded transition-colors duration-200"
+                            class="data-selected:text-accent hover:bg-lighter/25 flex aspect-square w-full items-center justify-center rounded transition-colors duration-200 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-selected:font-semibold data-disabled:hover:bg-transparent"
                           >
                             {day.day}
                           </DatePicker.DayTableCellTrigger>

packages/core/src/routes/date-picker/range/+page.svelte

@@ -60,7 +60,7 @@
     <Portal>
       <DatePicker.Positioner>
         <DatePicker.Content
-          class="bg-light data-open:animate-fade-in data-closed:animate-fade-out overflow-hidden rounded"
+          class="bg-light overflow-hidden rounded data-open:animate-fade-in data-closed:animate-fade-out"
         >
           <DatePicker.View view="day">
             <DatePicker.ViewControl

packages/core/src/routes/field/+page.svelte

@@ -59,7 +59,7 @@
         {/snippet}
       </Field.Label>
       <Field.ErrorText
-        class="text-danger data-invalid:animate-fade-in flex items-center gap-1 text-sm"
+        class="text-danger flex items-center gap-1 text-sm data-invalid:animate-fade-in"
       >
         Invalid title
       </Field.ErrorText>
@@ -92,7 +92,7 @@
         {/snippet}
       </Field.Label>
       <Field.ErrorText
-        class="text-danger data-invalid:animate-fade-in flex items-center gap-1 text-sm"
+        class="text-danger flex items-center gap-1 text-sm data-invalid:animate-fade-in"
       >
         Invalid description
       </Field.ErrorText>

packages/core/src/routes/hover-card/+page.svelte

@@ -18,7 +18,7 @@
   <Portal>
     <HoverCard.Positioner>
       <HoverCard.Content
-        class="bg-light data-open:animate-fade-in data-closed:animate-fade-out w-[90vw] rounded border p-4 lg:max-w-[24rem]"
+        class="bg-light w-[90vw] rounded border p-4 data-open:animate-fade-in data-closed:animate-fade-out lg:max-w-[24rem]"
       >
         <HoverCard.Arrow
           class="[--arrow-background:theme(colors.neutral[800])] [--arrow-size:theme(spacing.4)]"