@max-ts/svelte 0.2.0 → 0.4.0

package/README.md

@@ -1,161 +1,35 @@
-# @max-ts/svelte
+# svelte-components-starter
 
-Svelte UI-kit with vanilla-extract CSS-in-JS styling.
+A starter for creating a Svelte component library.
 
-## Installation
+## Development
+
+- Install dependencies:
 
 ```bash
-npm install @max-ts/svelte
-# or
-pnpm add @max-ts/svelte
-# or
-yarn add @max-ts/svelte
+npm install
 ```
 
-## Usage
-
-```svelte
-<script>
-  import { Button } from '@max-ts/svelte';
-  import '@max-ts/svelte/styles.css';
-</script>
+- Run the unit tests:
 
-<Button variant="default" size="md">
-  {#snippet children()}
-    Click me!
-  {/snippet}
-</Button>
+```bash
+npm run test
 ```
 
-## Components
-
-### Button
-
-A versatile button component with multiple variants and sizes.
-
-#### Props
-
-- `variant?: 'default' | 'destructive' | 'outline' | 'ghost' | 'link'` - Button style variant (default: 'default')
-- `size?: 'sm' | 'md' | 'lg' | 'icon' | 'iconSm'` - Button size (default: 'md')
-- `isLoading?: boolean` - Show loading spinner (default: false)
-- `fullWidth?: boolean` - Make button full width (default: false)
-- `disabled?: boolean` - Disable button (default: false)
-- `type?: 'button' | 'submit' | 'reset'` - Button type (default: 'button')
-- `class?: string` - Additional CSS classes
-- `onclick?: () => void` - Click handler
-- `children?: Snippet` - Button content (Svelte 5 snippet)
-- `startAdornment?: Snippet` - Content before button text
-- `endAdornment?: Snippet` - Content after button text
-
-#### Examples
-
-```svelte
-<!-- Basic usage -->
-<Button>
-  {#snippet children()}Default Button{/snippet}
-</Button>
-
-<!-- Different variants -->
-<Button variant="destructive">
-  {#snippet children()}Delete{/snippet}
-</Button>
-
-<Button variant="outline">
-  {#snippet children()}Outline{/snippet}
-</Button>
-
-<Button variant="ghost">
-  {#snippet children()}Ghost{/snippet}
-</Button>
-
-<Button variant="link">
-  {#snippet children()}Link{/snippet}
-</Button>
-
-<!-- Different sizes -->
-<Button size="sm">
-  {#snippet children()}Small{/snippet}
-</Button>
-
-<Button size="lg">
-  {#snippet children()}Large{/snippet}
-</Button>
-
-<!-- Icon button -->
-<Button size="icon" variant="outline">
-  {#snippet children()}🔍{/snippet}
-</Button>
-
-<!-- Loading state -->
-<Button isLoading={true}>
-  {#snippet children()}Loading...{/snippet}
-</Button>
+- Build the library:
 
-<!-- With adornments -->
-<Button>
-  {#snippet startAdornment()}📧{/snippet}
-  {#snippet children()}Send Email{/snippet}
-</Button>
-
-<!-- Full width -->
-<Button fullWidth={true}>
-  {#snippet children()}Full Width{/snippet}
-</Button>
+```bash
+npm run build
 ```
 
-## Styling
-
-This package uses vanilla-extract for type-safe CSS-in-JS. The theme tokens are shared with `@max-ts/kit` package, ensuring consistent design across React and Svelte components.
-
-### Theme tokens
-
-The package includes theme tokens for:
-- Colors (primary, secondary, error, success, warning, info, text, background)
-- Spacing (1-20 scale)
-- Font sizes (xs, sm, base, lg, xl, 2xl, 3xl, 4xl)
-- Font weights (normal, medium, semibold, bold)
-- Border radius (sm, md, lg)
-- Elevation (shadows 1-6)
+- Run the playground for development:
 
-### Custom styling
-
-You can override styles using CSS classes:
-
-```svelte
-<Button class="my-custom-button">
-  {#snippet children()}Custom{/snippet}
-</Button>
-
-<style>
-  :global(.my-custom-button) {
-    /* Your custom styles */
-  }
-</style>
+```bash
+npm run play
 ```
 
-## Development
+- Type checking:
 
 ```bash
-# Build the package
-pnpm build
-
-# Watch mode for development
-pnpm dev
-
-# Run Storybook
-pnpm storybook
-
-# Type checking
-pnpm lint:types
+npm run typecheck
 ```
-
-## Architecture
-
-- **Svelte 5**: Uses modern Svelte 5 syntax with runes and snippets
-- **vanilla-extract**: Type-safe CSS-in-JS with zero runtime
-- **Vite**: Fast build tool for library bundling
-- **Native Svelte features**: Uses Svelte's `class:` directive instead of external class utilities
-
-## License
-
-MIT

package/dist/_virtual/rolldown_runtime.js

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));export{o as __commonJSMin,c as __toESM};

package/dist/assets/styles.css.ts.vanilla-0Tc9t0gF.css

@@ -0,0 +1,9 @@
+.style__byu5qd0 {
+  padding: var(--spacing-1) var(--spacing-2);
+  width: 100%;
+  font-weight: var(--fontWeight-semibold);
+  font-size: var(--fontSize-sm);
+  overflow-wrap: break-word;
+  background-color: var(--colors-background-paper);
+  border-bottom: 1px solid var(--colors-border);
+}

package/dist/assets/styles.css.ts.vanilla-5Nv0HkaQ.css

@@ -0,0 +1,35 @@
+.style__1q4zm20 {
+  position: relative;
+  display: flex;
+  border-radius: var(--borderRadius-md);
+  border: 1px solid var(--colors-border);
+  box-shadow: var(--shadow-1);
+}
+.style__1q4zm20:has(:focus-visible) {
+  box-shadow: var(--shadow-3);
+}
+.style__1q4zm21 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+}
+.style__1q4zm22 {
+  display: flex;
+  height: var(--spacing-8);
+  align-items: center;
+  gap: var(--spacing-1);
+  border-radius: var(--borderRadius-md);
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-1);
+  font-size: var(--fontSize-sm);
+  font-weight: var(--fontWeight-medium);
+  user-select: none;
+}
+.style__1q4zm22 > svg {
+  color: var(--colors-text-secondary);
+  width: 0.875rem;
+  height: 0.875rem;
+}

package/dist/assets/styles.css.ts.vanilla-7N904gbK.css

@@ -0,0 +1,10 @@
+.style__1o60gea0 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  border: none;
+  padding: 0;
+}
+.style__1o60gea0:has(>[data-slot=checkbox-group]), .style__1o60gea0:has(>[data-slot=radio-group]) {
+  gap: var(--spacing-3);
+}

package/dist/assets/styles.css.ts.vanilla-B0DiuK5L.css

@@ -0,0 +1,13 @@
+.style__10hqk8n0 {
+  width: var(--cell-size);
+  height: var(--cell-size);
+  background-color: transparent;
+  padding: 0;
+  user-select: none;
+}
+.style__10hqk8n0[disabled] {
+  opacity: 0.5;
+}
+[dir=rtl] .style__10hqk8n0 {
+  transform: rotate(180deg);
+}

package/dist/assets/styles.css.ts.vanilla-B0TTsMYJ.css

@@ -0,0 +1,42 @@
+.style__1x1b5sl0 {
+  color: transparent;
+}
+.style__1x1b5sl1 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  padding-left: var(--spacing-8);
+  padding-right: var(--spacing-2);
+  border-radius: var(--borderRadius-sm);
+  font-size: var(--fontSize-sm);
+  cursor: default;
+  user-select: none;
+  outline: none;
+}
+.style__1x1b5sl1:focus {
+  background-color: var(--colors-background-elementHover);
+  color: var(--colors-foreground-secondary);
+}
+.style__1x1b5sl1[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.style__1x1b5sl1 svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+.style__1x1b5sl2 {
+  position: absolute;
+  left: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  width: 0.875rem;
+  height: 0.875rem;
+}

package/dist/assets/styles.css.ts.vanilla-B1TT1m93.css

@@ -0,0 +1,31 @@
+.style__1fq3dxn0 {
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: var(--spacing-2);
+  border-radius: var(--borderRadius-sm);
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-2);
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: var(--fontSize-sm);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  user-select: none;
+}
+.style__1fq3dxn0[data-highlighted], .style__1fq3dxn0[data-state=open] {
+  background-color: var(--colors-background-elementHover);
+  color: var(--colors-text-primary);
+}
+.style__1fq3dxn0[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.style__1fq3dxn0[data-inset] {
+  padding-inline-start: var(--spacing-8);
+}
+.style__1fq3dxn1 {
+  margin-inline-start: auto;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}

package/dist/assets/styles.css.ts.vanilla-B1yoOZ31.css

@@ -0,0 +1,4 @@
+.style__1mm3fo10 {
+  display: flex;
+  column-gap: var(--spacing-1);
+}

package/dist/assets/styles.css.ts.vanilla-BBUw7Noh.css

@@ -0,0 +1,10 @@
+.style__s2om6s0 {
+  display: flex;
+  height: var(--cell-size);
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  font-size: var(--fontSize-sm);
+  font-weight: var(--fontWeight-medium);
+}

package/dist/assets/styles.css.ts.vanilla-BBzDvFRY.css

@@ -0,0 +1,32 @@
+.style__1u2u0bp0 {
+  display: flex;
+  position: relative;
+  align-items: center;
+  gap: var(--spacing-1);
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-family: inherit;
+  width: 100%;
+  height: 100%;
+  overflow-wrap: break-word;
+}
+.style__1u2u0bp0 svg {
+  min-width: 12px;
+  stroke: currentColor;
+}
+.left__1u2u0bp1 {
+  justify-content: flex-start;
+}
+.center__1u2u0bp2 {
+  justify-content: center;
+}
+.right__1u2u0bp3 {
+  justify-content: flex-end;
+}
+.justify__1u2u0bp4 {
+  justify-content: space-between;
+}

package/dist/assets/styles.css.ts.vanilla-BFXJcmU9.css

@@ -0,0 +1,12 @@
+.style__9qi2jh0 {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-size: var(--fontSize-sm);
+  line-height: var(--lineHeight-snug);
+  font-weight: var(--fontWeight-medium);
+}
+[data-slot=field][data-disabled=true] .style__9qi2jh0 {
+  opacity: 0.5;
+}

package/dist/assets/styles.css.ts.vanilla-BIPaLPQs.css

@@ -0,0 +1,39 @@
+.style__ed88mc0 {
+  position: relative;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: var(--spacing-2);
+  border-radius: var(--borderRadius-sm);
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  padding-inline-start: var(--spacing-8);
+  padding-inline-end: var(--spacing-2);
+  font-size: var(--fontSize-sm);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  user-select: none;
+}
+.style__ed88mc0:focus {
+  background-color: var(--colors-background-elementHover);
+  color: var(--colors-text-primary);
+}
+.style__ed88mc0[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.style__ed88mc1 {
+  pointer-events: none;
+  position: absolute;
+  inset-inline-start: var(--spacing-2);
+  display: flex;
+  width: 0.875rem;
+  height: 0.875rem;
+  align-items: center;
+  justify-content: center;
+}
+.style__ed88mc2 {
+  width: var(--spacing-2);
+  height: var(--spacing-2);
+  fill: currentColor;
+}

package/dist/assets/styles.css.ts.vanilla-BKb9GGkm.css

@@ -0,0 +1,7 @@
+.style__1nghnwh0 {
+  color: var(--colors-text-secondary);
+  width: var(--cell-size);
+  border-radius: var(--borderRadius-md);
+  font-size: var(--fontSize-xs);
+  font-weight: var(--fontWeight-normal);
+}

package/dist/assets/styles.css.ts.vanilla-BQNoa8mK.css

@@ -0,0 +1,46 @@
+.style__em3vch0 {
+  display: flex;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  padding: 0;
+  white-space: nowrap;
+  user-select: none;
+}
+.style__em3vch0:focus {
+  position: relative;
+}
+.style__em3vch0[data-selected] {
+  background-color: var(--colors-primary);
+  color: var(--colors-foreground-primary);
+}
+.style__em3vch0[data-today] {
+  text-decoration: underline;
+  text-underline-offset: var(--spacing-1);
+  text-decoration-thickness: 2px;
+}
+.style__em3vch0[data-disabled] {
+  color: var(--colors-text-secondary);
+  pointer-events: none;
+  opacity: 0.5;
+}
+.style__em3vch0[data-unavailable] {
+  color: var(--colors-text-secondary);
+  text-decoration: line-through;
+}
+.style__em3vch0 > span {
+  font-size: var(--fontSize-xs);
+  opacity: 0.7;
+}
+.style__em3vch0[data-today][data-disabled] {
+  color: var(--colors-text-hint);
+}
+.style__em3vch0[data-outside-month]:not([data-selected]) {
+  color: var(--colors-text-hint);
+}
+.style__em3vch0[data-outside-month]:not([data-selected]):hover {
+  color: var(--colors-text-primary);
+}

package/dist/assets/styles.css.ts.vanilla-BSpq5Zrg.css

@@ -0,0 +1,6 @@
+.style__1dxg6ja0 {
+  color: var(--colors-text-secondary);
+  margin-inline-start: auto;
+  font-size: var(--fontSize-xs);
+  letter-spacing: 0.1em;
+}

package/dist/assets/styles.css.ts.vanilla-BUjzBrH3.css

@@ -0,0 +1,97 @@
+@keyframes style__oog05e0 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes style__oog05e1 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes style__oog05e2 {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+@keyframes style__oog05e3 {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+@keyframes style__oog05e4 {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes style__oog05e5 {
+  from {
+    transform: translateY(0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes style__oog05e6 {
+  from {
+    transform: translateX(-0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes style__oog05e7 {
+  from {
+    transform: translateX(0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+.style__oog05e8 {
+  z-index: 50;
+  background-color: var(--colors-background-paper);
+  color: var(--colors-text-primary);
+  max-height: var(--bits-dropdown-menu-content-available-height);
+  min-width: 8rem;
+  transform-origin: var(--bits-dropdown-menu-content-transform-origin);
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: var(--borderRadius-md);
+  border: 1px solid var(--colors-border);
+  padding: var(--spacing-1);
+  box-shadow: var(--shadow-4);
+  outline: none;
+}
+.style__oog05e8[data-state=open] {
+  animation: style__oog05e0 150ms ease-out, style__oog05e2 150ms ease-out;
+}
+.style__oog05e8[data-state=closed] {
+  animation: style__oog05e1 150ms ease-in, style__oog05e3 150ms ease-in;
+}
+.style__oog05e8[data-side=bottom] {
+  animation: style__oog05e4 150ms ease-out;
+}
+.style__oog05e8[data-side=top] {
+  animation: style__oog05e5 150ms ease-out;
+}
+.style__oog05e8[data-side=left] {
+  animation: style__oog05e7 150ms ease-out;
+}
+.style__oog05e8[data-side=right] {
+  animation: style__oog05e6 150ms ease-out;
+}

package/dist/assets/styles.css.ts.vanilla-BVrM2qXa.css

@@ -0,0 +1,8 @@
+.style__7d3xw70 {
+  display: flex;
+  cursor: default;
+  align-items: center;
+  justify-content: center;
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+}

package/dist/assets/styles.css.ts.vanilla-BY8jYwDp.css

@@ -0,0 +1,6 @@
+.style__thlklw0 {
+  border-bottom: 1px solid var(--colors-border);
+}
+.style__thlklw0:last-child {
+  border-bottom: none;
+}

package/dist/assets/styles.css.ts.vanilla-Bgwr9P3X.css

@@ -0,0 +1,19 @@
+.style__3pvz3c0 {
+  --cell-size: var(--spacing-8);
+  width: max-content;
+  background-color: var(--colors-background-paper);
+  padding: var(--spacing-3);
+}
+[data-slot=card-content] .style__3pvz3c0 {
+  background-color: transparent;
+}
+[data-slot=popover-content] .style__3pvz3c0 {
+  background-color: transparent;
+}
+.style__3pvz3c1 {
+  margin-top: var(--spacing-2);
+  width: 100%;
+}
+.style__3pvz3c2 {
+  user-select: none;
+}

package/dist/assets/styles.css.ts.vanilla-Bj4vursX.css

@@ -0,0 +1,45 @@
+.style__1sx68oi0 {
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: default;
+  align-items: center;
+  gap: var(--spacing-2);
+  border-radius: var(--borderRadius-sm);
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-8);
+  font-size: var(--fontSize-sm);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  user-select: none;
+}
+.style__1sx68oi0[data-highlighted] {
+  background-color: var(--colors-background-elementHover);
+  color: var(--colors-text-primary);
+}
+.style__1sx68oi0[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.style__1sx68oi0 svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+.style__1sx68oi0 > span:last-child {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+.style__1sx68oi1 {
+  position: absolute;
+  inset-inline-end: var(--spacing-2);
+  display: flex;
+  width: 0.875rem;
+  height: 0.875rem;
+  align-items: center;
+  justify-content: center;
+}

package/dist/assets/styles.css.ts.vanilla-BkrD0mJX.css

@@ -0,0 +1,14 @@
+.style__zhheok0 {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  container-type: inline-size;
+  container-name: field-group;
+}
+.style__zhheok0[data-slot=checkbox-group], .style__zhheok0[data-slot=radio-group] {
+  gap: var(--spacing-3);
+}
+.style__zhheok0  > [data-slot=field-group] {
+  gap: var(--spacing-4);
+}