@shopify/shop-minis-react 0.0.1 → 0.0.2

package/README.md

@@ -1,144 +1,164 @@
 # @shopify/shop-minis-react
 
-React component library for Shopify Shop Minis with Tailwind CSS v4 support.
+React component library for Shopify Shop Minis with Tailwind CSS v4 support. This library provides a comprehensive set of components with minimal setup required for consumers.
+
+## Features
+
+- 🎨 **Tailwind CSS v4** with CSS-first design tokens
+- 📦 **Source-only distribution** for optimal tree-shaking
+- 🎯 **TypeScript** first with full type safety
+- 🔧 **Minimal setup** for consumers
+- 🎭 **Dark mode** support out of the box
+- ♿ **Accessible** components built with Radix UI
 
 ## Installation
 
 ```bash
+pnpm add @shopify/shop-minis-react
+# or
 npm install @shopify/shop-minis-react
+# or
+yarn add @shopify/shop-minis-react
 ```
 
-## Requirements
-
-- React >=18.2.0
-- Tailwind CSS v4
-- TypeScript >=5.0.0
+### Peer Dependencies
 
-## Usage
-
-### Setting up Tailwind CSS
-
-This library uses Tailwind CSS v4's CSS-first configuration approach. Import our theme in your main CSS file:
+```bash
+pnpm add react react-dom tailwindcss typescript
+```
 
-```css
-/* your-app/src/styles.css */
-@import "@shopify/shop-minis-react/tailwind";
+## Quick Setup
 
-/* Your additional styles and theme overrides */
-@theme {
-  /* Extend or override theme variables as needed */
-  --color-brand: #your-brand-color;
-}
-```
+### 1. Import Styles
 
-Or if you want to include our base styles as well:
+Add the library's CSS to your main CSS file or app entry point:
 
 ```css
-/* your-app/src/styles.css */
+/* src/index.css or src/app.css */
 @import "@shopify/shop-minis-react/styles";
-```
-
-### Tailwind Configuration
 
-Your project should be using Tailwind CSS v4. Here's a minimal configuration:
-
-```javascript
-// tailwind.config.js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}',
-  ],
+/* Your custom styles */
+@layer base {
+  :root {
+    /* Override CSS variables if needed */
+    --radius: 0.5rem;
+  }
 }
 ```
 
-### Using Components
+### 2. Use Components
 
 ```tsx
-import { Button, Card } from '@shopify/shop-minis-react'
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@shopify/shop-minis-react'
 
 function App() {
   return (
-    <Card className="p-6">
-      <Button variant="primary">
-        Click me
-      </Button>
+    <Card>
+      <CardHeader>
+        <CardTitle>Hello Shop Minis</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Click me</Button>
+      </CardContent>
     </Card>
   )
 }
 ```
 
-## Available Theme Variables
+## Advanced Configuration
 
-Our theme provides the following CSS variables that are automatically available in your project:
+### Custom Theme
 
-### Colors
-- **Primary**: `--color-primary-{50-900}` - Blue color palette
-- **Secondary**: `--color-secondary-{50-900}` - Gray color palette
+You can customize the design system by overriding CSS variables:
 
-### Typography
-- **Font Family**: `--font-sans` - Inter font stack
+```css
+:root {
+  /* Customize border radius */
+  --radius: 0.75rem;
 
-### Spacing
-- `--spacing-18` (4.5rem)
-- `--spacing-88` (22rem)
+  /* Customize colors */
+  --primary: oklch(0.7 0.25 280);
+  --primary-foreground: oklch(0.98 0.02 280);
 
-### Border Radius
-- `--radius-xl` (0.75rem)
-- `--radius-2xl` (1rem)
-- `--radius-3xl` (1.5rem)
+  /* Add your brand colors */
+  --brand: oklch(0.6 0.3 200);
+}
 
-## Using CSS Variables
+.dark {
+  --primary: oklch(0.5 0.3 280);
+  /* ... dark mode overrides */
+}
 
-All theme values are available as CSS variables for runtime access:
+### Vite Configuration
 
-```css
-.my-component {
-  background-color: var(--color-primary-500);
-  border-radius: var(--radius-xl);
-  font-family: var(--font-sans);
-}
+For optimal development experience with Vite:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  optimizeDeps: {
+    include: ['@shopify/shop-minis-react']
+  }
+})
 ```
 
-## Dynamic Theming
+## Component Philosophy
 
-Since we use CSS variables, you can change themes at runtime:
+This library follows a **source-only** distribution model, meaning:
 
-```javascript
-// Change primary color dynamically
-document.documentElement.style.setProperty('--color-primary-500', '#your-new-color');
-```
+- ✅ **Tree-shaking friendly** - Only import what you use
+- ✅ **TypeScript native** - Full type safety without compilation artifacts
+- ✅ **CSS-first theming** - Customize appearance via CSS variables
+- ✅ **Build-time optimization** - Components are optimized with your build
+
+## Available Components
+
+- **Layout**: Card, Container, Grid
+- **Forms**: Button, Input, Label, Textarea
+- **Feedback**: Alert, Toast, Loading
+- **Navigation**: Tabs, Breadcrumb
+- **Overlays**: Dialog, Popover, Tooltip
+- **Data Display**: Badge, Avatar, Separator
 
-## Migration from v3
+## Troubleshooting
 
-If you're migrating from our previous version that used JavaScript configuration:
+### Styles Missing or Components Look Unstyled
 
-1. Remove any imports of our Tailwind preset
-2. Import our CSS theme instead: `@import "@shopify/shop-minis-react/tailwind"`
-3. Update your Tailwind config to remove our preset
-4. Ensure you're using Tailwind CSS v4
+If your components appear unstyled, it's likely a Tailwind content scanning issue:
 
-## Benefits
+1. **Ensure CSS is imported:**
+   ```css
+   @import "@shopify/shop-minis-react/styles";
+   ```
 
-- **Runtime access**: All theme values available as CSS variables
-- **Better performance**: Leverages Tailwind v4's performance improvements
-- **Simpler setup**: No JavaScript configuration needed
-- **Future-proof**: Aligned with Tailwind v4's direction
-- **Dynamic theming**: CSS variables can be changed at runtime
+2. **Check Tailwind content scanning:**
+   Your `tailwind.config.js` must include our library files:
+   ```js
+   content: [
+     './src/**/*.{js,ts,jsx,tsx}',
+     // This line is CRITICAL:
+     './node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}',
+   ]
+   ```
 
-## Components
+3. **Use our preset (easiest):**
+   ```js
+   const shopMinisConfig = require('@shopify/shop-minis-react/tailwind')
+   module.exports = { ...shopMinisConfig, /* your config */ }
+   ```
 
-### HelloWorld
+4. **Verify build process:**
+   Ensure your build tool processes the imported CSS file.
 
-A simple greeting component with size variants.
+## Contributing
 
-**Props:**
-- `name?: string` - The name to greet (default: "World")
-- `size?: 'sm' | 'md' | 'lg'` - Size variant (default: "md")
-- `className?: string` - Additional CSS classes
-- `children?: React.ReactNode` - Custom content
+This package is part of the Shopify Shop Client monorepo. Please refer to the main repository for contribution guidelines.
 
 ## License
 
-See LICENSE.txt
+See LICENSE.txt for details.

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,9 @@
+var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function l(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+export {
+  o as commonjsGlobal,
+  l as getDefaultExportFromCjs
+};
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index.js

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as e } from "../node_modules/.pnpm/url-parse@1.5.10/node_modules/url-parse/index.js";
+var o = e();
+const s = /* @__PURE__ */ r(o);
+export {
+  s as default
+};
+//# sourceMappingURL=index.js.map

package/dist/_virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index2.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=index2.js.map

package/dist/_virtual/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,141 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { Root as n, Portal as i, Overlay as s, Trigger as d, Content as c, Title as g, Description as u, Action as f, Cancel as m } from "../../node_modules/.pnpm/@radix-ui_react-alert-dialog@1.1.14_@types_react-dom@19.1.6_@types_react@19.1.6__@types_react_5smkpul3xqqoqjowwwfk226yey/node_modules/@radix-ui/react-alert-dialog/dist/index.js";
+import { cn as o } from "../../lib/utils.js";
+import { buttonVariants as l } from "./button.js";
+function b({
+  ...t
+}) {
+  return /* @__PURE__ */ e(n, { "data-slot": "alert-dialog", ...t });
+}
+function y({
+  ...t
+}) {
+  return /* @__PURE__ */ e(d, { "data-slot": "alert-dialog-trigger", ...t });
+}
+function p({
+  ...t
+}) {
+  return /* @__PURE__ */ e(i, { "data-slot": "alert-dialog-portal", ...t });
+}
+function x({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    s,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: o(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function T({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ r(p, { children: [
+    /* @__PURE__ */ e(x, {}),
+    /* @__PURE__ */ e(
+      c,
+      {
+        "data-slot": "alert-dialog-content",
+        className: o(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          t
+        ),
+        ...a
+      }
+    )
+  ] });
+}
+function w({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: o("flex flex-col gap-2 text-center sm:text-left", t),
+      ...a
+    }
+  );
+}
+function C({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: o(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function z({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    g,
+    {
+      "data-slot": "alert-dialog-title",
+      className: o("text-lg font-semibold", t),
+      ...a
+    }
+  );
+}
+function h({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    u,
+    {
+      "data-slot": "alert-dialog-description",
+      className: o("text-muted-foreground text-sm", t),
+      ...a
+    }
+  );
+}
+function j({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    f,
+    {
+      className: o(l(), t),
+      ...a
+    }
+  );
+}
+function O({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    m,
+    {
+      className: o(l({ variant: "outline" }), t),
+      ...a
+    }
+  );
+}
+export {
+  b as AlertDialog,
+  j as AlertDialogAction,
+  O as AlertDialogCancel,
+  T as AlertDialogContent,
+  h as AlertDialogDescription,
+  C as AlertDialogFooter,
+  w as AlertDialogHeader,
+  x as AlertDialogOverlay,
+  p as AlertDialogPortal,
+  z as AlertDialogTitle,
+  y as AlertDialogTrigger
+};
+//# sourceMappingURL=alert-dialog.js.map

package/dist/components/ui/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","sources":["../../../src/components/ui/alert-dialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'\n\nimport {cn} from '../../lib/utils'\n\nimport {buttonVariants} from './button'\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn('text-lg font-semibold', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({variant: 'outline'}), className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n}\n"],"names":["AlertDialog","props","AlertDialogPrimitive.Root","AlertDialogTrigger","AlertDialogPrimitive.Trigger","AlertDialogPortal","AlertDialogPrimitive.Portal","AlertDialogOverlay","className","jsx","AlertDialogPrimitive.Overlay","cn","AlertDialogContent","AlertDialogPrimitive.Content","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogPrimitive.Title","AlertDialogDescription","AlertDialogPrimitive.Description","AlertDialogAction","AlertDialogPrimitive.Action","buttonVariants","AlertDialogCancel","AlertDialogPrimitive.Cancel"],"mappings":";;;;AAQA,SAASA,EAAY;AAAA,EACnB,GAAGC;AACL,GAA2D;AACzD,2BAAQC,GAAA,EAA0B,aAAU,gBAAgB,GAAGD,GAAO;AACxE;AAEA,SAASE,EAAmB;AAAA,EAC1B,GAAGF;AACL,GAA8D;AAC5D,2BACGG,GAAA,EAA6B,aAAU,wBAAwB,GAAGH,GAAO;AAE9E;AAEA,SAASI,EAAkB;AAAA,EACzB,GAAGJ;AACL,GAA6D;AAC3D,2BACGK,GAAA,EAA4B,aAAU,uBAAuB,GAAGL,GAAO;AAE5E;AAEA,SAASM,EAAmB;AAAA,EAC1B,WAAAC;AAAA,EACA,GAAGP;AACL,GAA8D;AAE1D,SAAA,gBAAAQ;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGP;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASW,EAAmB;AAAA,EAC1B,WAAAJ;AAAA,EACA,GAAGP;AACL,GAA8D;AAC5D,2BACGI,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAI,EAACF,GAAmB,EAAA;AAAA,IACpB,gBAAAE;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAWF;AAAA,UACT;AAAA,UACAH;AAAA,QACF;AAAA,QACC,GAAGP;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;AAEA,SAASa,EAAkB,EAAC,WAAAN,GAAW,GAAGP,KAAqC;AAE3E,SAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWE,EAAG,gDAAgDH,CAAS;AAAA,MACtE,GAAGP;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASc,EAAkB,EAAC,WAAAP,GAAW,GAAGP,KAAqC;AAE3E,SAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGP;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASe,EAAiB;AAAA,EACxB,WAAAR;AAAA,EACA,GAAGP;AACL,GAA4D;AAExD,SAAA,gBAAAQ;AAAA,IAACQ;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWN,EAAG,yBAAyBH,CAAS;AAAA,MAC/C,GAAGP;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASiB,EAAuB;AAAA,EAC9B,WAAAV;AAAA,EACA,GAAGP;AACL,GAAkE;AAE9D,SAAA,gBAAAQ;AAAA,IAACU;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWR,EAAG,iCAAiCH,CAAS;AAAA,MACvD,GAAGP;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASmB,EAAkB;AAAA,EACzB,WAAAZ;AAAA,EACA,GAAGP;AACL,GAA6D;AAEzD,SAAA,gBAAAQ;AAAA,IAACY;AAAAA,IAAA;AAAA,MACC,WAAWV,EAAGW,EAAe,GAAGd,CAAS;AAAA,MACxC,GAAGP;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASsB,EAAkB;AAAA,EACzB,WAAAf;AAAA,EACA,GAAGP;AACL,GAA6D;AAEzD,SAAA,gBAAAQ;AAAA,IAACe;AAAAA,IAAA;AAAA,MACC,WAAWb,EAAGW,EAAe,EAAC,SAAS,UAAS,CAAC,GAAGd,CAAS;AAAA,MAC5D,GAAGP;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/components/ui/button.js

@@ -0,0 +1,50 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Root as s } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
+import { cva as a } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as d } from "../../lib/utils.js";
+const u = a(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function b({
+  className: e,
+  variant: r,
+  size: t,
+  asChild: i = !1,
+  ...o
+}) {
+  return /* @__PURE__ */ n(
+    i ? s : "button",
+    {
+      "data-slot": "button",
+      className: d(u({ variant: r, size: t, className: e })),
+      ...o
+    }
+  );
+}
+export {
+  b as Button,
+  u as buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/components/ui/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {Slot} from '@radix-ui/react-slot'\nimport {cva, type VariantProps} from 'class-variance-authority'\n\nimport {cn} from '../../lib/utils'\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot : 'button'\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({variant, size, className}))}\n      {...props}\n    />\n  )\n}\n\nexport {Button, buttonVariants}\n"],"names":["buttonVariants","cva","Button","className","variant","size","asChild","props","jsx","Slot","cn"],"mappings":";;;;AAOA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,SAASC,EAAO;AAAA,EACd,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GAGK;AAID,SAAA,gBAAAC;AAAA,IAHWF,IAAUG,IAAO;AAAA,IAG3B;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAGV,EAAe,EAAC,SAAAI,GAAS,MAAAC,GAAM,WAAAF,EAAA,CAAU,CAAC;AAAA,MACvD,GAAGI;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/components/ui/card.js

@@ -0,0 +1,91 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as o } from "../../lib/utils.js";
+function n({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "card",
+      className: o(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        t
+      ),
+      ...r
+    }
+  );
+}
+function s({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: o(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        t
+      ),
+      ...r
+    }
+  );
+}
+function c({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: o("leading-none font-semibold", t),
+      ...r
+    }
+  );
+}
+function i({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: o("text-muted-foreground text-sm", t),
+      ...r
+    }
+  );
+}
+function l({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: o(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        t
+      ),
+      ...r
+    }
+  );
+}
+function u({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: o("px-6", t),
+      ...r
+    }
+  );
+}
+function f({ className: t, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: o("flex items-center px-6 [.border-t]:pt-6", t),
+      ...r
+    }
+  );
+}
+export {
+  n as Card,
+  l as CardAction,
+  u as CardContent,
+  i as CardDescription,
+  f as CardFooter,
+  s as CardHeader,
+  c as CardTitle
+};
+//# sourceMappingURL=card.js.map

package/dist/components/ui/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cn} from '../../lib/utils'\n\nfunction Card({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('leading-none font-semibold', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn('px-6', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n"],"names":["Card","className","props","jsx","cn","CardHeader","CardTitle","CardDescription","CardAction","CardContent","CardFooter"],"mappings":";;AAIA,SAASA,EAAK,EAAC,WAAAC,GAAW,GAAGC,KAAqC;AAE9D,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASG,EAAW,EAAC,WAAAJ,GAAW,GAAGC,KAAqC;AAEpE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASI,EAAU,EAAC,WAAAL,GAAW,GAAGC,KAAqC;AAEnE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,8BAA8BH,CAAS;AAAA,MACpD,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASK,EAAgB,EAAC,WAAAN,GAAW,GAAGC,KAAqC;AAEzE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,iCAAiCH,CAAS;AAAA,MACvD,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASM,EAAW,EAAC,WAAAP,GAAW,GAAGC,KAAqC;AAEpE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASO,EAAY,EAAC,WAAAR,GAAW,GAAGC,KAAqC;AAErE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,QAAQH,CAAS;AAAA,MAC9B,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASQ,EAAW,EAAC,WAAAT,GAAW,GAAGC,KAAqC;AAEpE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,2CAA2CH,CAAS;AAAA,MACjE,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/components/ui/sonner.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useTheme as t } from "../../node_modules/.pnpm/next-themes@0.4.6_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next-themes/dist/index.js";
+import { Toaster as s } from "../../node_modules/.pnpm/sonner@2.0.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/sonner/dist/index.js";
+const n = ({ ...r }) => {
+  const { theme: o = "system" } = t();
+  return /* @__PURE__ */ e(
+    s,
+    {
+      theme: o,
+      className: "toaster group",
+      style: {
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)"
+      },
+      ...r
+    }
+  );
+};
+export {
+  n as Toaster
+};
+//# sourceMappingURL=sonner.js.map

package/dist/components/ui/sonner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sonner.js","sources":["../../../src/components/ui/sonner.tsx"],"sourcesContent":["import {useTheme} from 'next-themes'\nimport {Toaster as Sonner, ToasterProps} from 'sonner'\n\nconst Toaster = ({...props}: ToasterProps) => {\n  const {theme = 'system'} = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps['theme']}\n      className=\"toaster group\"\n      style={\n        {\n          '--normal-bg': 'var(--popover)',\n          '--normal-text': 'var(--popover-foreground)',\n          '--normal-border': 'var(--border)',\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\nexport {Toaster}\n"],"names":["Toaster","props","theme","useTheme","jsx","Sonner"],"mappings":";;;AAGA,MAAMA,IAAU,CAAC,EAAC,GAAGC,QAAyB;AAC5C,QAAM,EAAC,OAAAC,IAAQ,SAAQ,IAAIC,EAAS;AAGlC,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAH;AAAA,MACA,WAAU;AAAA,MACV,OACE;AAAA,QACE,eAAe;AAAA,QACf,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,MACrB;AAAA,MAED,GAAGD;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/hooks/navigation/useCloseMini.js

@@ -0,0 +1,12 @@
+import { useHandleAction as i } from "../../internal/useHandleAction.js";
+import { useShopActions as e } from "../../internal/useShopActions.js";
+const t = () => {
+  const { closeMini: o } = e();
+  return {
+    closeMini: i(o)
+  };
+};
+export {
+  t as useCloseMini
+};
+//# sourceMappingURL=useCloseMini.js.map

package/dist/hooks/navigation/useCloseMini.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCloseMini.js","sources":["../../../src/hooks/navigation/useCloseMini.ts"],"sourcesContent":["import {useHandleAction} from '../../internal/useHandleAction'\nimport {useShopActions} from '../../internal/useShopActions'\n\ninterface UseCloseMiniReturns {\n  /**\n   * Closes the Mini viewer.\n   */\n  closeMini: () => void\n}\n\nexport const useCloseMini = (): UseCloseMiniReturns => {\n  const {closeMini} = useShopActions()\n\n  return {\n    closeMini: useHandleAction(closeMini),\n  }\n}\n"],"names":["useCloseMini","closeMini","useShopActions","useHandleAction"],"mappings":";;AAUO,MAAMA,IAAe,MAA2B;AAC/C,QAAA,EAAC,WAAAC,EAAS,IAAIC,EAAe;AAE5B,SAAA;AAAA,IACL,WAAWC,EAAgBF,CAAS;AAAA,EACtC;AACF;"}