@starwind-ui/core 1.8.0 → 1.10.0

package/dist/index.js

@@ -6,29 +6,56 @@ import { fileURLToPath } from "url";
 var registry_default = {
   $schema: "https://starwind.dev/registry-schema.json",
   components: [
-    { name: "accordion", type: "component", version: "1.1.0", dependencies: [] },
-    { name: "alert", type: "component", version: "1.1.1", dependencies: [] },
-    { name: "avatar", type: "component", version: "1.1.1", dependencies: [] },
-    { name: "badge", type: "component", version: "1.1.1", dependencies: [] },
-    { name: "breadcrumb", type: "component", version: "1.0.0", dependencies: [] },
-    { name: "button", type: "component", version: "2.0.1", dependencies: [] },
-    { name: "card", type: "component", version: "1.1.0", dependencies: [] },
-    { name: "checkbox", type: "component", version: "1.2.0", dependencies: [] },
-    { name: "dialog", type: "component", version: "1.2.0", dependencies: [] },
-    { name: "dropdown", type: "component", version: "1.0.3", dependencies: [] },
-    { name: "dropzone", type: "component", version: "1.0.0", dependencies: [] },
-    { name: "input", type: "component", version: "1.1.1", dependencies: [] },
-    { name: "label", type: "component", version: "1.1.1", dependencies: [] },
-    { name: "pagination", type: "component", version: "2.0.1", dependencies: [] },
-    { name: "progress", type: "component", version: "1.0.0", dependencies: [] },
-    { name: "radio-group", type: "component", version: "1.0.0", dependencies: [] },
-    { name: "select", type: "component", version: "1.4.1", dependencies: [] },
-    { name: "skeleton", type: "component", version: "1.0.0", dependencies: [] },
-    { name: "switch", type: "component", version: "1.1.0", dependencies: [] },
-    { name: "table", type: "component", version: "1.0.0", dependencies: [] },
-    { name: "tabs", type: "component", version: "1.2.0", dependencies: [] },
-    { name: "textarea", type: "component", version: "1.1.1", dependencies: [] },
-    { name: "tooltip", type: "component", version: "1.1.2", dependencies: [] }
+    { name: "accordion", type: "component", version: "1.3.0", dependencies: [] },
+    { name: "alert", type: "component", version: "1.3.0", dependencies: [] },
+    {
+      name: "alert-dialog",
+      type: "component",
+      version: "1.0.0",
+      dependencies: ["@starwind-ui/core/button@^2.1.0"]
+    },
+    { name: "aspect-ratio", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "avatar", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "badge", type: "component", version: "1.3.0", dependencies: [] },
+    { name: "breadcrumb", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "button", type: "component", version: "2.2.0", dependencies: [] },
+    { name: "card", type: "component", version: "1.3.0", dependencies: [] },
+    {
+      name: "carousel",
+      type: "component",
+      version: "1.0.0",
+      dependencies: ["@starwind-ui/core/button@^2.1.0", "embla-carousel@^8.6.0"]
+    },
+    { name: "checkbox", type: "component", version: "1.4.0", dependencies: [] },
+    { name: "dialog", type: "component", version: "1.4.0", dependencies: [] },
+    { name: "dropdown", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "dropzone", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "input", type: "component", version: "1.3.0", dependencies: [] },
+    {
+      name: "item",
+      type: "component",
+      version: "1.0.0",
+      dependencies: ["@starwind-ui/core/separator@^1.0.0"]
+    },
+    { name: "label", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "pagination", type: "component", version: "3.0.0", dependencies: [] },
+    { name: "progress", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "radio-group", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "select", type: "component", version: "1.6.0", dependencies: [] },
+    { name: "separator", type: "component", version: "1.0.0", dependencies: [] },
+    {
+      name: "sheet",
+      type: "component",
+      version: "1.1.0",
+      dependencies: ["@starwind-ui/core/dialog@^1.3.0"]
+    },
+    { name: "skeleton", type: "component", version: "1.2.0", dependencies: [] },
+    { name: "spinner", type: "component", version: "1.0.0", dependencies: [] },
+    { name: "switch", type: "component", version: "1.3.0", dependencies: [] },
+    { name: "table", type: "component", version: "1.1.0", dependencies: [] },
+    { name: "tabs", type: "component", version: "1.4.0", dependencies: [] },
+    { name: "textarea", type: "component", version: "1.3.0", dependencies: [] },
+    { name: "tooltip", type: "component", version: "1.3.0", dependencies: [] }
   ]
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n  name: string;\n  version: string;\n  type: \"component\";\n  dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n  components: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n  // In production (when installed as a dependency), the components will be in dist/src/components\n  // In development, they will be in src/components\n  const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n  return join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n  \"$schema\": \"https://starwind.dev/registry-schema.json\",\n  \"components\": [\n    { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"button\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n    { \"name\": \"card\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.0.3\", \"dependencies\": [] },\n    { \"name\": \"dropzone\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"input\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"label\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"pagination\", \"type\": \"component\", \"version\": \"2.0.1\", \"dependencies\": [] },\n    { \"name\": \"progress\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"radio-group\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"select\", \"type\": \"component\", \"version\": \"1.4.1\", \"dependencies\": [] },\n    { \"name\": \"skeleton\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"table\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.1.1\", \"dependencies\": [] },\n    { \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.1.2\", \"dependencies\": [] }\n  ]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACE,SAAW;AAAA,EACX,YAAc;AAAA,IACZ,EAAE,MAAQ,aAAa,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACnF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,eAAe,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACrF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,WAAW,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,EACnF;AACF;;;ADLA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGnF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC/D;AAKO,IAAM,WAAW,iBAAkB;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/registry.json"],"sourcesContent":["import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nimport componentRegistry from \"./registry.json\" with { type: \"json\" };\n\n/**\n * Component metadata interface describing a Starwind UI component\n */\nexport interface ComponentMeta {\n  name: string;\n  version: string;\n  type: \"component\";\n  dependencies: string[];\n}\n\n/**\n * Registry interface containing all available components\n */\nexport interface Registry {\n  components: ComponentMeta[];\n}\n\nconst __dirname = fileURLToPath(new URL(\".\", import.meta.url));\n\n/**\n * Get the absolute path to a component file\n * @param {string} componentName - The name of the component\n * @param {string} fileName - The name of the file within the component\n * @returns {string} The absolute path to the component file\n */\nexport const getComponentPath = (componentName: string, fileName: string): string => {\n  // In production (when installed as a dependency), the components will be in dist/src/components\n  // In development, they will be in src/components\n  const componentsDir = __dirname.includes(\"dist\") ? \"src/components\" : \"src/components\";\n  return join(__dirname, componentsDir, componentName, fileName);\n};\n\n/**\n * Map of all components and their metadata from registry\n */\nexport const registry = componentRegistry.components as ComponentMeta[];\n","{\n  \"$schema\": \"https://starwind.dev/registry-schema.json\",\n  \"components\": [\n    { \"name\": \"accordion\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"alert\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"alert-dialog\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\"]\n    },\n    { \"name\": \"aspect-ratio\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"avatar\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"badge\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"breadcrumb\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"button\", \"type\": \"component\", \"version\": \"2.2.0\", \"dependencies\": [] },\n    { \"name\": \"card\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"carousel\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\"@starwind-ui/core/button@^2.1.0\", \"embla-carousel@^8.6.0\"]\n    },\n    { \"name\": \"checkbox\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"dialog\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"dropdown\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"dropzone\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"input\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    {\n      \"name\": \"item\",\n      \"type\": \"component\",\n      \"version\": \"1.0.0\",\n      \"dependencies\": [\"@starwind-ui/core/separator@^1.0.0\"]\n    },\n    { \"name\": \"label\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"pagination\", \"type\": \"component\", \"version\": \"3.0.0\", \"dependencies\": [] },\n    { \"name\": \"progress\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"radio-group\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"select\", \"type\": \"component\", \"version\": \"1.6.0\", \"dependencies\": [] },\n    { \"name\": \"separator\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    {\n      \"name\": \"sheet\",\n      \"type\": \"component\",\n      \"version\": \"1.1.0\",\n      \"dependencies\": [\"@starwind-ui/core/dialog@^1.3.0\"]\n    },\n    { \"name\": \"skeleton\", \"type\": \"component\", \"version\": \"1.2.0\", \"dependencies\": [] },\n    { \"name\": \"spinner\", \"type\": \"component\", \"version\": \"1.0.0\", \"dependencies\": [] },\n    { \"name\": \"switch\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"table\", \"type\": \"component\", \"version\": \"1.1.0\", \"dependencies\": [] },\n    { \"name\": \"tabs\", \"type\": \"component\", \"version\": \"1.4.0\", \"dependencies\": [] },\n    { \"name\": \"textarea\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] },\n    { \"name\": \"tooltip\", \"type\": \"component\", \"version\": \"1.3.0\", \"dependencies\": [] }\n  ]\n}\n"],"mappings":";AAAA,SAAS,YAAY;AACrB,SAAS,qBAAqB;;;ACD9B;AAAA,EACE,SAAW;AAAA,EACX,YAAc;AAAA,IACZ,EAAE,MAAQ,aAAa,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACnF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E;AAAA,MACE,MAAQ;AAAA,MACR,MAAQ;AAAA,MACR,SAAW;AAAA,MACX,cAAgB,CAAC,iCAAiC;AAAA,IACpD;AAAA,IACA,EAAE,MAAQ,gBAAgB,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACtF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E;AAAA,MACE,MAAQ;AAAA,MACR,MAAQ;AAAA,MACR,SAAW;AAAA,MACX,cAAgB,CAAC,mCAAmC,uBAAuB;AAAA,IAC7E;AAAA,IACA,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E;AAAA,MACE,MAAQ;AAAA,MACR,MAAQ;AAAA,MACR,SAAW;AAAA,MACX,cAAgB,CAAC,oCAAoC;AAAA,IACvD;AAAA,IACA,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,cAAc,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACpF,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,eAAe,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACrF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,aAAa,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACnF;AAAA,MACE,MAAQ;AAAA,MACR,MAAQ;AAAA,MACR,SAAW;AAAA,MACX,cAAgB,CAAC,iCAAiC;AAAA,IACpD;AAAA,IACA,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,WAAW,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IACjF,EAAE,MAAQ,UAAU,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAChF,EAAE,MAAQ,SAAS,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC/E,EAAE,MAAQ,QAAQ,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAC9E,EAAE,MAAQ,YAAY,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,IAClF,EAAE,MAAQ,WAAW,MAAQ,aAAa,SAAW,SAAS,cAAgB,CAAC,EAAE;AAAA,EACnF;AACF;;;ADhCA,IAAM,YAAY,cAAc,IAAI,IAAI,KAAK,YAAY,GAAG,CAAC;AAQtD,IAAM,mBAAmB,CAAC,eAAuB,aAA6B;AAGnF,QAAM,gBAAgB,UAAU,SAAS,MAAM,IAAI,mBAAmB;AACtE,SAAO,KAAK,WAAW,eAAe,eAAe,QAAQ;AAC/D;AAKO,IAAM,WAAW,iBAAkB;","names":[]}

package/dist/src/components/accordion/Accordion.astro

@@ -13,12 +13,18 @@ type Props = HTMLAttributes<"div"> & {
   defaultValue?: string;
 };
 
-const accordion = tv({ base: "starwind-accordion" });
+export const accordion = tv({ base: "starwind-accordion" });
 
 const { type = "single", defaultValue, class: className, ...rest } = Astro.props;
 ---
 
-<div class={accordion({ class: className })} data-type={type} data-value={defaultValue} {...rest}>
+<div
+  class={accordion({ class: className })}
+  data-type={type}
+  data-value={defaultValue}
+  data-slot="accordion"
+  {...rest}
+>
   <slot />
 </div>
 

package/dist/src/components/accordion/AccordionContent.astro

@@ -8,7 +8,7 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div">;
 
-const accordionContent = tv({
+export const accordionContent = tv({
   base: [
     "starwind-accordion-content",
     "transform-gpu overflow-hidden",
@@ -24,6 +24,7 @@ const { class: className, ...rest } = Astro.props;
   class={accordionContent({ class: className })}
   data-state="closed"
   style="animation: none;"
+  data-slot="accordion-content"
   {...rest}
 >
   <div class="overflow-hidden px-5 pt-0 pb-4">

package/dist/src/components/accordion/AccordionItem.astro

@@ -9,13 +9,19 @@ type Props = HTMLAttributes<"div"> & {
   value: string;
 };
 
-const accordionItem = tv({
+export const accordionItem = tv({
   base: "starwind-accordion-item border-x border-b first:rounded-t-lg first:border-t last:rounded-b-lg",
 });
 
 const { value, class: className, ...rest } = Astro.props;
 ---
 
-<div class={accordionItem({ class: className })} data-value={value} data-state="closed" {...rest}>
+<div
+  class={accordionItem({ class: className })}
+  data-value={value}
+  data-state="closed"
+  data-slot="accordion-item"
+  {...rest}
+>
   <slot />
 </div>

package/dist/src/components/accordion/AccordionTrigger.astro

@@ -5,13 +5,13 @@ import { tv } from "tailwind-variants";
 
 type Props = HTMLAttributes<"button">;
 
-const accordionTrigger = tv({
+export const accordionTrigger = tv({
   base: [
     "starwind-accordion-trigger",
     "flex w-full items-center justify-between gap-4 rounded-md px-5 py-4",
-    "starwind-transition-colors hover:text-muted-foreground text-left font-medium",
+    "hover:text-muted-foreground text-left font-medium transition-all",
     "[&[data-state=open]>svg]:rotate-180",
-    "focus-visible:outline-outline focus-visible:outline-2 focus-visible:outline-offset-0",
+    "focus-visible:border-outline focus-visible:ring-outline/50 outline-none focus-visible:ring-3",
   ],
 });
 
@@ -21,6 +21,7 @@ const { class: className, ...rest } = Astro.props;
 <button
   type="button"
   class={accordionTrigger({ class: className })}
+  data-slot="accordion-trigger"
   aria-expanded="false"
   {...rest}
 >

package/dist/src/components/accordion/index.ts

@@ -1,9 +1,11 @@
-import Accordion from "./Accordion.astro";
-import AccordionContent from "./AccordionContent.astro";
-import AccordionItem from "./AccordionItem.astro";
-import AccordionTrigger from "./AccordionTrigger.astro";
+import Accordion, { accordion } from "./Accordion.astro";
+import AccordionContent, { accordionContent } from "./AccordionContent.astro";
+import AccordionItem, { accordionItem } from "./AccordionItem.astro";
+import AccordionTrigger, { accordionTrigger } from "./AccordionTrigger.astro";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+const AccordionVariants = { accordion, accordionContent, accordionItem, accordionTrigger };
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccordionVariants };
 
 export default {
   Root: Accordion,

package/dist/src/components/alert/Alert.astro

@@ -4,11 +4,11 @@ import { tv, type VariantProps } from "tailwind-variants";
 
 type Props = HTMLAttributes<"div"> & VariantProps<typeof alert>;
 
-const alert = tv({
+export const alert = tv({
   base: "text-foreground relative w-full rounded-lg border p-4",
   variants: {
     variant: {
-      default: "bg-background [&>h5>svg]:text-foreground",
+      default: "bg-background dark:bg-input/30 [&>h5>svg]:text-foreground",
       primary: "border-primary bg-primary/7 [&>h5>svg]:text-primary",
       secondary: "border-secondary bg-secondary/7 [&>h5>svg]:text-secondary",
       info: "border-info bg-info/7 [&>h5>svg]:text-info",
@@ -21,8 +21,11 @@ const alert = tv({
 });
 
 const { variant, class: className, ...rest } = Astro.props;
+
+const inferredRole =
+  rest.role ?? (variant === "error" || variant === "warning" ? "alert" : "status");
 ---
 
-<div class={alert({ variant, class: className })} {...rest}>
+<div class={alert({ variant, class: className })} data-slot="alert" role={inferredRole} {...rest}>
   <slot />
 </div>

package/dist/src/components/alert/AlertDescription.astro

@@ -2,13 +2,13 @@
 import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
-const alertDescription = tv({ base: "[&_p]:leading-relaxed" });
+export const alertDescription = tv({ base: "leading-relaxed" });
 
-type Props = HTMLAttributes<"div">;
+type Props = HTMLAttributes<"p">;
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={alertDescription({ class: className })} {...rest}>
+<p class={alertDescription({ class: className })} data-slot="alert-description" {...rest}>
   <slot />
-</div>
+</p>

package/dist/src/components/alert/AlertTitle.astro

@@ -2,15 +2,15 @@
 import type { HTMLAttributes } from "astro/types";
 import { tv } from "tailwind-variants";
 
-const alertTitle = tv({
+export const alertTitle = tv({
   base: "mb-2 flex items-center gap-2 text-lg leading-none font-medium tracking-tight",
 });
 
-type Props = HTMLAttributes<"div">;
+type Props = HTMLAttributes<"h5">;
 
 const { class: className, ...rest } = Astro.props;
 ---
 
-<h5 class={alertTitle({ class: className })} {...rest}>
+<h5 class={alertTitle({ class: className })} data-slot="alert-title" {...rest}>
   <slot />
 </h5>

package/dist/src/components/alert/index.ts

@@ -1,8 +1,10 @@
-import Alert from "./Alert.astro";
-import AlertDescription from "./AlertDescription.astro";
-import AlertTitle from "./AlertTitle.astro";
+import Alert, { alert } from "./Alert.astro";
+import AlertDescription, { alertDescription } from "./AlertDescription.astro";
+import AlertTitle, { alertTitle } from "./AlertTitle.astro";
 
-export { Alert, AlertDescription, AlertTitle };
+const AlertVariants = { alert, alertDescription, alertTitle };
+
+export { Alert, AlertDescription, AlertTitle, AlertVariants };
 
 export default {
   Root: Alert,

package/dist/src/components/alert-dialog/AlertDialog.astro

@@ -0,0 +1,273 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div class:list={["starwind-alert-dialog", className]} data-slot="alert-dialog" {...rest}>
+  <slot />
+</div>
+
+<script>
+  class AlertDialogHandler {
+    private triggers: HTMLButtonElement[] = [];
+    private dialog: HTMLDialogElement | null = null;
+    private closeButtons: HTMLButtonElement[] = [];
+    private actionButtons: HTMLButtonElement[] = [];
+    private backdrop: HTMLElement | null = null;
+    private dialogId: string;
+    /**
+     * The duration of the animation in milliseconds. This is used to calculate the
+     * duration of close animation before hiding the dialog and backdrop
+     */
+    private animationDuration: number;
+
+    constructor(dialogWrapper: HTMLElement, dialogNumber: number) {
+      this.dialog = dialogWrapper.querySelector("dialog");
+      this.backdrop = dialogWrapper.querySelector(".starwind-alert-dialog-backdrop");
+      if (!this.dialog || !this.backdrop) {
+        throw new Error("AlertDialog: dialog or backdrop not found");
+      }
+
+      // if no ID was provided for the wrapper, generate one
+      if (dialogWrapper.id) {
+        this.dialogId = dialogWrapper.id;
+      } else {
+        this.dialogId = `starwind-alert-dialog${dialogNumber}`;
+        dialogWrapper.id = this.dialogId;
+      }
+
+      // animationDuration is set with inline styles through passed prop to DialogContent
+      const animationDurationString = this.dialog.style.animationDuration;
+      if (animationDurationString.endsWith("ms")) {
+        this.animationDuration = parseFloat(animationDurationString);
+      } else if (animationDurationString.endsWith("s")) {
+        // using something like @playform/compress might optimize to use "s" instead of "ms"
+        this.animationDuration = parseFloat(animationDurationString) * 1000;
+      } else {
+        this.animationDuration = 200;
+      }
+
+      // Find internal triggers and handle them
+      const internalTriggers = dialogWrapper.querySelectorAll(".starwind-alert-dialog-trigger");
+      internalTriggers.forEach((triggerElement) => {
+        const tempTrigger = triggerElement as HTMLElement;
+        let trigger: HTMLButtonElement;
+
+        if (tempTrigger?.hasAttribute("data-as-child")) {
+          trigger = tempTrigger.firstElementChild as HTMLButtonElement;
+        } else {
+          trigger = tempTrigger as HTMLButtonElement;
+        }
+
+        if (trigger) {
+          this.triggers.push(trigger);
+        }
+      });
+
+      // Find external triggers that target this dialog
+      this.findExternalTriggers();
+
+      // if closeButtons are set with asChild, swap the wrapper with its first child
+      const tempCloseButtons = dialogWrapper.querySelectorAll(
+        ".starwind-alert-dialog-close",
+      ) as NodeListOf<HTMLElement>;
+      tempCloseButtons.forEach((button: HTMLElement) => {
+        if (button.hasAttribute("data-as-child")) {
+          const childElement = button.firstElementChild;
+          if (childElement) {
+            childElement.classList.add("starwind-alert-dialog-close");
+            button.parentNode?.replaceChild(childElement, button);
+          }
+        }
+        return button;
+      });
+
+      // Convert NodeList to Array for consistency with triggers
+      this.closeButtons = Array.from(
+        dialogWrapper.querySelectorAll(".starwind-alert-dialog-close"),
+      ) as HTMLButtonElement[];
+
+      // if actionButtons are set with asChild, swap the wrapper with its first child
+      const tempActionButtons = dialogWrapper.querySelectorAll(
+        ".starwind-alert-dialog-action",
+      ) as NodeListOf<HTMLElement>;
+      tempActionButtons.forEach((button: HTMLElement) => {
+        if (button.hasAttribute("data-as-child")) {
+          const childElement = button.firstElementChild;
+          if (childElement) {
+            childElement.classList.add("starwind-alert-dialog-action");
+            button.parentNode?.replaceChild(childElement, button);
+          }
+        }
+        return button;
+      });
+
+      // Convert NodeList to Array for consistency with triggers
+      this.actionButtons = Array.from(
+        dialogWrapper.querySelectorAll(".starwind-alert-dialog-action"),
+      ) as HTMLButtonElement[];
+
+      // if essential elements are not there, exit
+      if (!this.dialog || !this.backdrop) return;
+
+      this.setupAccessibility(dialogNumber);
+      this.setupEvents();
+    }
+
+    private setupAccessibility(dialogNumber: number): void {
+      // get the first heading element in the dialog
+      const firstHeading = this.dialog?.querySelector("h1, h2, h3, h4, h5, h6");
+      if (firstHeading) {
+        // create a unique ID for the heading
+        firstHeading.id = `starwind-alert-dialog${dialogNumber}-heading`;
+        // set the aria-labelledby attribute to the first heading element
+        this.dialog?.setAttribute("aria-labelledby", firstHeading.id);
+      }
+    }
+
+    /**
+     * Find all external triggers that target this dialog
+     */
+    private findExternalTriggers(): void {
+      const externalTriggers = document.querySelectorAll(
+        `.starwind-alert-dialog-trigger[data-dialog-for="${this.dialogId}"]`,
+      );
+
+      externalTriggers.forEach((triggerElement) => {
+        // Skip if this is an internal trigger we already processed
+        const dialogWrapper = triggerElement.closest(".starwind-alert-dialog");
+        if (dialogWrapper && dialogWrapper.id === this.dialogId) {
+          return;
+        }
+
+        let trigger: HTMLButtonElement;
+        if (triggerElement.hasAttribute("data-as-child")) {
+          trigger = triggerElement.firstElementChild as HTMLButtonElement;
+        } else {
+          trigger = triggerElement as HTMLButtonElement;
+        }
+
+        if (trigger && !this.triggers.includes(trigger)) {
+          this.triggers.push(trigger);
+        }
+      });
+    }
+
+    private setupEvents(): void {
+      if (!this.dialog) return;
+      // Add click listeners to all triggers
+      this.triggers.forEach((trigger) => {
+        trigger.addEventListener("click", () => {
+          this.open();
+        });
+      });
+
+      // Add click handlers to all close buttons
+      this.closeButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          // Only close if this is the topmost dialog
+          const openDialogs = document.querySelectorAll("dialog[open]");
+          if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+            this.close();
+          }
+        });
+      });
+
+      // Add click handlers to all action buttons
+      this.actionButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          // Only close if this is the topmost dialog
+          const openDialogs = document.querySelectorAll("dialog[open]");
+          if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+            this.close();
+          }
+        });
+      });
+
+      // Handle escape key
+      this.dialog.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          // prevent default dialog closing behavior so we can add closing animation
+          e.preventDefault();
+          // Only close if this is the topmost dialog
+          const openDialogs = document.querySelectorAll("dialog[open]");
+          if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+            this.close();
+          }
+        }
+      });
+
+      // Intercept form submissions to handle dialog close
+      const forms = this.dialog.querySelectorAll("form");
+      forms.forEach((form) => {
+        form.addEventListener("submit", (e) => {
+          /**
+           * Default form.method = "dialog" submissions cause the dialog to close
+           * Default form.method = "post" submissions do not close the dialog
+           * Here we intercept the form submission and manage the dialog closing if method = "dialog"
+           * so we can add closing animation
+           * Normal form event listeners for "submit" will still get the form data
+           */
+          if (form.method === "dialog") {
+            e.preventDefault();
+            // Only close if this is the topmost dialog
+            const openDialogs = document.querySelectorAll("dialog[open]");
+            if (openDialogs.length > 0 && openDialogs[openDialogs.length - 1] === this.dialog) {
+              this.close();
+            }
+          }
+        });
+      });
+    }
+
+    private open(): void {
+      if (!this.dialog || !this.backdrop) return;
+      this.dialog.showModal();
+      document.body.classList.add("overflow-hidden");
+      this.backdrop.classList.remove("hidden");
+      this.backdrop.dataset.state = "open";
+      this.dialog.dataset.state = "open";
+    }
+
+    private close(): void {
+      if (!this.dialog || !this.backdrop) return;
+      this.dialog.dataset.state = "closed";
+      this.backdrop.dataset.state = "closed";
+
+      // Wait for animation to finish before hiding backdrop
+      setTimeout(() => {
+        this.backdrop?.classList.add("hidden");
+        this.dialog?.close();
+        const stillOpen = document.querySelectorAll("dialog[open]").length;
+        if (stillOpen === 0) {
+          document.body.classList.remove("overflow-hidden");
+        }
+      }, this.animationDuration);
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const alertDialogInstances = new WeakMap<HTMLElement, AlertDialogHandler>();
+
+  // Initialize all dialogs
+  const setupAlertDialogs = () => {
+    document.querySelectorAll(".starwind-alert-dialog").forEach((dialogWrapper, idx) => {
+      const wrapper = dialogWrapper as HTMLElement;
+      if (!alertDialogInstances.has(wrapper)) {
+        alertDialogInstances.set(wrapper, new AlertDialogHandler(wrapper, idx));
+      }
+    });
+  };
+
+  setupAlertDialogs();
+  document.addEventListener("astro:after-swap", setupAlertDialogs);
+</script>
+
+<style>
+  .overflow-hidden {
+    overflow: hidden;
+  }
+</style>

package/dist/src/components/alert-dialog/AlertDialogAction.astro

@@ -0,0 +1,44 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+import { ButtonVariants } from "@/components/starwind/button";
+
+type Props = HTMLAttributes<"button"> & {
+  /**
+   * When true, the component will render its child element instead of a button
+   */
+  asChild?: boolean;
+};
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+
+// Get the first child element if asChild is true
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+  hasChildren = true;
+}
+---
+
+{
+  asChild && hasChildren ? (
+    <div
+      class:list={["starwind-alert-dialog-action", className]}
+      data-slot="alert-dialog-action"
+      data-as-child
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      type="button"
+      class={ButtonVariants.button({
+        variant: "default",
+        class: `starwind-alert-dialog-action ${className}`,
+      })}
+      data-slot="alert-dialog-action"
+      {...rest}
+    >
+      <slot />
+    </button>
+  )
+}