@max-ts/svelte 0.2.0 → 0.3.0

package/README.md

@@ -1,161 +1,58 @@
-# @max-ts/svelte
+# Svelte library
 
-Svelte UI-kit with vanilla-extract CSS-in-JS styling.
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
 
-## Installation
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
 
-```bash
-npm install @max-ts/svelte
-# or
-pnpm add @max-ts/svelte
-# or
-yarn add @max-ts/svelte
-```
-
-## Usage
+## Creating a project
 
-```svelte
-<script>
-  import { Button } from '@max-ts/svelte';
-  import '@max-ts/svelte/styles.css';
-</script>
+If you're seeing this, you've probably already done this step. Congrats!
 
-<Button variant="default" size="md">
-  {#snippet children()}
-    Click me!
-  {/snippet}
-</Button>
-```
+```sh
+# create a new project in the current directory
+npx sv create
 
-## 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>
-
-<!-- With adornments -->
-<Button>
-  {#snippet startAdornment()}📧{/snippet}
-  {#snippet children()}Send Email{/snippet}
-</Button>
-
-<!-- Full width -->
-<Button fullWidth={true}>
-  {#snippet children()}Full Width{/snippet}
-</Button>
+# create a new project in my-app
+npx sv create my-app
 ```
 
-## Styling
+## Developing
 
-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.
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-### Theme tokens
+```sh
+npm run dev
 
-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)
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
 
-### Custom styling
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
 
-You can override styles using CSS classes:
+## Building
 
-```svelte
-<Button class="my-custom-button">
-  {#snippet children()}Custom{/snippet}
-</Button>
+To build your library:
 
-<style>
-  :global(.my-custom-button) {
-    /* Your custom styles */
-  }
-</style>
+```sh
+npm pack
 ```
 
-## Development
+To create a production version of your showcase app:
 
-```bash
-# Build the package
-pnpm build
-
-# Watch mode for development
-pnpm dev
+```sh
+npm run build
+```
 
-# Run Storybook
-pnpm storybook
+You can preview the production build with `npm run preview`.
 
-# Type checking
-pnpm lint:types
-```
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
 
-## Architecture
+## Publishing
 
-- **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
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
 
-## License
+To publish your library to [npm](https://www.npmjs.com):
 
-MIT
+```sh
+npm publish
+```

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+
+let {
+	ref = $bindable(null),
+	value = $bindable(),
+	...restProps
+}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	{...restProps}
+/>

package/dist/components/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+declare const Accordion: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Accordion/Content/Content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import type { WithoutChild } from '../../../styles/index.js';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	children,
+	...restProps
+}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	data-slot="accordion-content"
+	class={styles.content}
+	{...restProps}
+>
+	<div class={[styles.inner, className]}>
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

package/dist/components/Accordion/Content/Content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+declare const Content: import("svelte").Component<Omit<AccordionPrimitive.ContentProps, "child">, {}, "ref">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/Accordion/Content/styles.css.js

@@ -0,0 +1,37 @@
+import { keyframes, style, theme } from '../../../styles/index.js';
+const accordionUp = keyframes({
+    '0%': {
+        height: 'var(--bits-accordion-content-height)',
+    },
+    '100%': {
+        height: 0,
+    },
+});
+const accordionDown = keyframes({
+    from: {
+        height: 0,
+    },
+    to: {
+        height: 'var(--bits-accordion-content-height)',
+    },
+});
+const content = style({
+    overflow: 'hidden',
+    fontSize: theme.fontSize.sm,
+    selectors: {
+        '&[data-state=closed]': {
+            animation: `${accordionUp} 0.2s ease-out`,
+        },
+        '&[data-state=open]': {
+            animation: `${accordionDown} 0.2s ease-out`,
+        },
+    },
+});
+const inner = style({
+    paddingTop: 0,
+    paddingBottom: theme.spacing[4],
+});
+export default {
+    content,
+    inner,
+};

package/dist/components/Accordion/Item/Item.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	...restProps
+}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={[styles.item, className]}
+	{...restProps}
+/>

package/dist/components/Accordion/Item/Item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+declare const Item: import("svelte").Component<AccordionPrimitive.ItemProps, {}, "ref">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/components/Accordion/Item/styles.css.js

@@ -0,0 +1,12 @@
+import { style, theme } from '../../../styles/index.js';
+const item = style({
+    borderBottom: `1px solid ${theme.colors.border}`,
+    selectors: {
+        '&:last-child': {
+            borderBottom: 'none',
+        },
+    },
+});
+export default {
+    item,
+};

package/dist/components/Accordion/Trigger/Trigger.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+import { ChevronDownIcon } from '@lucide/svelte';
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import type { WithoutChild } from '../../../styles/index.js';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	level = 3,
+	children,
+	...restProps
+}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+	level?: AccordionPrimitive.HeaderProps['level'];
+} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class={styles.header}>
+	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
+		bind:ref
+		class={[styles.trigger, className]}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDownIcon
+			class={styles.icon}
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/dist/components/Accordion/Trigger/Trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import type { WithoutChild } from '../../../styles/index.js';
+type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
+    level?: AccordionPrimitive.HeaderProps['level'];
+};
+declare const Trigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Trigger = ReturnType<typeof Trigger>;
+export default Trigger;

package/dist/components/Accordion/Trigger/styles.css.js

@@ -0,0 +1,54 @@
+import { globalStyle, style, theme } from '../../../styles/index.js';
+const header = style({
+    display: 'flex',
+});
+const trigger = style({
+    display: 'flex',
+    flex: 1,
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: theme.spacing[4],
+    borderRadius: theme.borderRadius.md,
+    paddingTop: theme.spacing[4],
+    paddingBottom: theme.spacing[4],
+    textAlign: 'start',
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+    transitionProperty: 'all',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDuration: '150ms',
+    outline: '2px solid transparent',
+    outlineOffset: '2px',
+    selectors: {
+        '&:hover': {
+            textDecoration: 'underline',
+        },
+        '&:focus-visible': {
+            // This combines border-ring and ring-ring/50
+            boxShadow: `0 0 0 3px ${theme.colors.info}`,
+            borderColor: theme.colors.info,
+        },
+        '&[disabled]': {
+            pointerEvents: 'none',
+            opacity: 0.5,
+        },
+    },
+});
+globalStyle(`${trigger}[data-state=open] > svg`, {
+    transform: 'rotate(180deg)',
+});
+const icon = style({
+    color: theme.colors.text.secondary,
+    pointerEvents: 'none',
+    width: theme.spacing[4],
+    height: theme.spacing[4],
+    flexShrink: 0,
+    transform: 'translateY(0.125rem)',
+    transitionProperty: 'transform',
+    transitionDuration: '200ms',
+});
+export default {
+    header,
+    trigger,
+    icon,
+};

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,9 @@
+declare const Accordion: {
+    Trigger: import("svelte").Component<Omit<import("bits-ui").AccordionTriggerProps, "child"> & {
+        level?: import("bits-ui").AccordionHeaderProps["level"];
+    }, {}, "ref">;
+    Item: import("svelte").Component<import("bits-ui").AccordionItemProps, {}, "ref">;
+    Content: import("svelte").Component<Omit<import("bits-ui").AccordionContentProps, "child">, {}, "ref">;
+    Root: import("svelte").Component<import("bits-ui").AccordionRootProps, {}, "value" | "ref">;
+};
+export { Accordion };

package/dist/components/Accordion/index.js

@@ -0,0 +1,11 @@
+import Root from './Accordion.svelte';
+import { Content } from './Content/index.js';
+import { Item } from './Item/index.js';
+import { Trigger } from './Trigger/index.js';
+const Accordion = {
+    Trigger,
+    Item,
+    Content,
+    Root,
+};
+export { Accordion };

package/dist/components/Button/Button.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+import styles from './styles.css.js';
+import type { ButtonProps } from './types.js';
+
+let {
+	ref = $bindable(null),
+	variant = 'default',
+	size = 'medium',
+	type = 'button',
+	href = undefined,
+	children,
+	loading = false,
+	fullWidth = false,
+	class: className,
+	disabled,
+	...restProps
+}: ButtonProps = $props();
+
+const classNames = $derived([
+	styles.buttonVariants[variant],
+	styles.buttonSizes[size],
+	{
+		[styles.loading]: loading,
+		[styles.fullWidth]: fullWidth,
+	},
+	className,
+]);
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={classNames}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={classNames}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/Button/Button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonProps } from './types.js';
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.svelte';
+export { buttonVariants } from './styles.css.js';

package/dist/components/Button/styles.css.js

@@ -0,0 +1,158 @@
+import { keyframes, style, styleVariants, theme } from '../../styles/index.js';
+const buttonBase = style({
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    whiteSpace: 'nowrap',
+    borderRadius: theme.borderRadius.md,
+    borderWidth: 0,
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    fontWeight: theme.fontWeight.medium,
+    transition: 'background-color 0.2s',
+    cursor: 'pointer',
+    lineHeight: '100%',
+    position: 'relative',
+    selectors: {
+        '&:disabled': {
+            pointerEvents: 'none',
+            opacity: 0.6,
+        },
+        '&:focus-visible': {
+            outline: '2px solid transparent',
+            outlineOffset: '2px',
+            boxShadow: theme.elevation[1],
+        },
+    },
+});
+const spin = keyframes({
+    '0%': {
+        transform: 'rotate(0deg)',
+    },
+    '100%': {
+        transform: 'rotate(360deg)',
+    },
+});
+const loading = style({
+    pointerEvents: 'none',
+    opacity: 0.6,
+    '::after': {
+        content: '',
+        position: 'absolute',
+        display: 'inline-block',
+        boxSizing: 'border-box',
+        width: '18px',
+        height: '18px',
+        borderRadius: '50%',
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        borderBottomColor: 'transparent',
+        animation: `${spin} 1s linear infinite`,
+        zIndex: 2,
+    },
+    ':before': {
+        content: '',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        borderRadius: 'inherit',
+        backgroundColor: 'inherit',
+        zIndex: 1,
+    },
+});
+const fullWidth = style({
+    width: '100%',
+});
+export const buttonVariants = styleVariants({
+    default: [
+        buttonBase,
+        {
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.foreground.primary,
+            ':hover': {
+                backgroundColor: `color-mix(in oklch, ${theme.colors.primary} 85%, transparent)`,
+            },
+        },
+    ],
+    destructive: [
+        buttonBase,
+        {
+            backgroundColor: theme.colors.error,
+            color: theme.colors.foreground.primary,
+            ':hover': {
+                backgroundColor: `color-mix(in oklch, ${theme.colors.error} 85%, transparent)`,
+            },
+        },
+    ],
+    outline: [
+        buttonBase,
+        {
+            border: `1px solid ${theme.colors.border}`,
+            backgroundColor: theme.colors.background.paper,
+            color: theme.colors.text.primary,
+            ':hover': {
+                backgroundColor: theme.colors.background.elementHover,
+            },
+        },
+    ],
+    ghost: [
+        buttonBase,
+        {
+            backgroundColor: 'transparent',
+            color: theme.colors.text.primary,
+            selectors: {
+                [`&${loading}`]: {
+                    backgroundColor: theme.colors.background.elementHover,
+                },
+            },
+            ':hover': {
+                backgroundColor: theme.colors.background.elementHover,
+            },
+        },
+    ],
+    link: [
+        buttonBase,
+        {
+            backgroundColor: 'transparent',
+            color: theme.colors.primary,
+            textUnderlineOffset: '4px',
+            ':hover': {
+                textDecorationLine: 'underline',
+            },
+        },
+    ],
+});
+const buttonSizes = styleVariants({
+    small: {
+        height: theme.spacing[6],
+        padding: `${theme.spacing[1]} ${theme.spacing[2]}`,
+        borderRadius: theme.borderRadius.sm,
+        fontSize: theme.fontSize.xs,
+    },
+    medium: {
+        height: theme.spacing[8],
+        padding: `${theme.spacing[1]} ${theme.spacing[3]}`,
+        fontSize: theme.fontSize.sm,
+    },
+    large: {
+        height: theme.spacing[10],
+        padding: `${theme.spacing[2]} ${theme.spacing[4]}`,
+        fontSize: theme.fontSize.base,
+    },
+    icon: {
+        height: theme.spacing[8],
+        width: theme.spacing[8],
+    },
+    iconSmall: {
+        height: theme.spacing[6],
+        width: theme.spacing[6],
+    },
+});
+export default {
+    buttonSizes,
+    buttonVariants,
+    fullWidth,
+    loading,
+};