@lanrenbang/basecoat-ultra-svelte 0.1.0

package/dist/components/Toggle.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext } from 'svelte';
+
+  let {
+    children,
+    pressed = $bindable(false),
+    value = '',
+    variant = 'outline',
+    size = 'md',
+    class: className = '',
+    ...rest
+  }: {
+    children?: Snippet;
+    pressed?: boolean;
+    value?: string;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  // Check if we're inside a ToggleGroup
+  const groupContext = getContext<{
+    handleToggle: (value: string) => void;
+    isPressed: (value: string) => boolean;
+    getType: () => 'single' | 'multiple';
+  } | undefined>('toggle-group');
+
+  const isInGroup = !!groupContext;
+
+  // Determine pressed state - from group context or local state
+  const isPressed = $derived(
+    isInGroup && value ? groupContext!.isPressed(value) : pressed
+  );
+
+  function handleClick() {
+    if (isInGroup && value) {
+      groupContext!.handleToggle(value);
+    } else {
+      pressed = !pressed;
+    }
+  }
+
+  const baseClass = 'btn toggle';
+  const finalClass = $derived([
+    baseClass, 
+    variant !== 'primary' ? `btn-${variant}` : '',
+    size !== 'md' ? `btn-${size}` : '',
+    className
+  ].filter(Boolean).join(' '));
+</script>
+
+<button 
+  type="button" 
+  class={finalClass} 
+  aria-pressed={isPressed} 
+  data-value={value || undefined}
+  onclick={handleClick}
+  {...rest}
+>
+  {@render children?.()}
+</button>
+
+<style>
+  @import "../../../../ultra/src/css/parts/components/button.css";
+  @import "../../../../ultra/src/css/parts/custom/toggle-group.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    pressed?: boolean;
+    value?: string;
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
+    size?: 'sm' | 'md' | 'lg' | 'icon';
+    class?: string;
+    [key: string]: any;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/ToggleGroup.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+
+  let {
+    children,
+    type = 'single',
+    value = $bindable<string | string[] | null>(null),
+    variant = 'default',
+    class: className = '',
+    ...rest
+  }: {
+    children?: Snippet;
+    type?: 'single' | 'multiple';
+    value?: string | string[] | null;
+    variant?: 'default' | 'outline';
+    class?: string;
+    [key: string]: any;
+  } = $props();
+
+  // Initialize value based on type
+  $effect(() => {
+    if (value === null) {
+      value = type === 'single' ? null : [];
+    }
+  });
+
+  function handleToggle(toggleValue: string) {
+    if (type === 'single') {
+      value = value === toggleValue ? null : toggleValue;
+    } else {
+      const currentValues = Array.isArray(value) ? value : [];
+      if (currentValues.includes(toggleValue)) {
+        value = currentValues.filter(v => v !== toggleValue);
+      } else {
+        value = [...currentValues, toggleValue];
+      }
+    }
+  }
+
+  function isPressed(toggleValue: string): boolean {
+    if (type === 'single') {
+      return value === toggleValue;
+    }
+    return Array.isArray(value) && value.includes(toggleValue);
+  }
+
+  // Expose context for child Toggle components
+  setContext('toggle-group', { 
+    handleToggle, 
+    isPressed, 
+    getType: () => type 
+  });
+</script>
+
+<div 
+  class={['toggle-group', className].filter(Boolean).join(' ')} 
+  role="group"
+  data-type={type}
+  data-variant={variant}
+  {...rest}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  @import "../../../../ultra/src/css/parts/custom/toggle-group.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    type?: 'single' | 'multiple';
+    value?: string | string[] | null;
+    variant?: 'default' | 'outline';
+    class?: string;
+    [key: string]: any;
+};
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/Tooltip.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    children,
+    content,
+    side = 'top',
+    class: className = '',
+    ...rest
+  }: {
+    children: Snippet;
+    content: string;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    class?: string;
+    [key: string]: any;
+  } = $props();
+</script>
+
+<div 
+  class={['inline-block', className].filter(Boolean).join(' ')}
+  data-tooltip={content}
+  data-side={side}
+  {...rest}
+>
+  {@render children()}
+</div>
+
+<style>
+  /* Basecoat 的 Tooltip 往往在 tooltip.css 中定义了属性选择器 */
+  @import "../../../../ultra/src/css/parts/components/tooltip.css";
+  @reference "../reference.css";
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    content: string;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    class?: string;
+    [key: string]: any;
+};
+declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+export { default as Button } from './components/Button.svelte';
+export { default as Badge } from './components/Badge.svelte';
+export { default as Alert } from './components/Alert.svelte';
+export { default as Card } from './components/Card.svelte';
+export { default as Avatar } from './components/Avatar.svelte';
+export { default as Kbd } from './components/Kbd.svelte';
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as Progress } from './components/Progress.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as Radio } from './components/Radio.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Slider } from './components/Slider.svelte';
+export { default as Separator } from './components/Separator.svelte';
+export { default as ButtonGroup } from './components/ButtonGroup.svelte';
+export { default as Toggle } from './components/Toggle.svelte';
+export { default as ToggleGroup } from './components/ToggleGroup.svelte';
+export { default as Table } from './components/Table.svelte';
+export { default as Item } from './components/Item.svelte';
+export { default as Empty } from './components/Empty.svelte';
+export { default as Breadcrumb } from './components/Breadcrumb.svelte';
+export { default as Pagination } from './components/Pagination.svelte';
+export { default as Accordion } from './components/Accordion.svelte';
+export { default as Collapsible } from './components/Collapsible.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as Sheet } from './components/Sheet.svelte';
+export { default as Drawer } from './components/Drawer.svelte';
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as Command } from './components/Command.svelte';
+export { default as InputOTP } from './components/InputOTP.svelte';
+export { default as Carousel } from './components/Carousel.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as Resizable } from './components/Resizable.svelte';
+export { default as CatppuccinThemeSwitcher } from './components/CatppuccinThemeSwitcher.svelte';

package/dist/index.js

@@ -0,0 +1,47 @@
+export { default as Button } from './components/Button.svelte';
+export { default as Badge } from './components/Badge.svelte';
+export { default as Alert } from './components/Alert.svelte';
+export { default as Card } from './components/Card.svelte';
+// Batch 1: Atomic Components
+export { default as Avatar } from './components/Avatar.svelte';
+export { default as Kbd } from './components/Kbd.svelte';
+export { default as Skeleton } from './components/Skeleton.svelte';
+export { default as Spinner } from './components/Spinner.svelte';
+export { default as Progress } from './components/Progress.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as Radio } from './components/Radio.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Slider } from './components/Slider.svelte';
+export { default as Separator } from './components/Separator.svelte';
+export { default as ButtonGroup } from './components/ButtonGroup.svelte';
+export { default as Toggle } from './components/Toggle.svelte';
+export { default as ToggleGroup } from './components/ToggleGroup.svelte';
+// Batch 2: Structure & List Components
+export { default as Table } from './components/Table.svelte';
+export { default as Item } from './components/Item.svelte';
+export { default as Empty } from './components/Empty.svelte';
+export { default as Breadcrumb } from './components/Breadcrumb.svelte';
+export { default as Pagination } from './components/Pagination.svelte';
+// Batch 3: Interactive Components
+export { default as Accordion } from './components/Accordion.svelte';
+export { default as Collapsible } from './components/Collapsible.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+// Batch 4: Complex Overlays & Menus
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as Sheet } from './components/Sheet.svelte';
+export { default as Drawer } from './components/Drawer.svelte';
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as Select } from './components/Select.svelte';
+// Batch 5: Advanced & External Components
+export { default as Toast } from './components/Toast.svelte';
+export { default as Command } from './components/Command.svelte';
+export { default as InputOTP } from './components/InputOTP.svelte';
+export { default as Carousel } from './components/Carousel.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';
+export { default as Resizable } from './components/Resizable.svelte';
+export { default as CatppuccinThemeSwitcher } from './components/CatppuccinThemeSwitcher.svelte';

package/dist/reference.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@reference "../../../ultra/src/css/basecoat.css";

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@lanrenbang/basecoat-ultra-svelte",
+  "version": "0.1.0",
+  "description": "Svelte 5 components for Basecoat Ultra with Runes support.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Lanrenbang",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lanrenbang/basecoat-ultra.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://lanrenbang.github.io/basecoat-ultra",
+  "bugs": {
+    "url": "https://github.com/Lanrenbang/basecoat-ultra/issues"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "runes",
+    "tailwind",
+    "ui",
+    "components",
+    "basecoat"
+  ],
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.svelte.d.ts",
+      "svelte": "./dist/components/*.svelte",
+      "default": "./dist/components/*.svelte"
+    },
+    "./*": {
+      "types": "./dist/components/*.svelte.d.ts",
+      "svelte": "./dist/components/*.svelte",
+      "default": "./dist/components/*.svelte"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && svelte-package"
+  },
+  "dependencies": {
+    "flatpickr": "^4.6.13",
+    "split.js": "^1.6.5"
+  },
+  "peerDependencies": {
+    "@lanrenbang/basecoat-ultra": ">=0.2.0",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@lanrenbang/basecoat-ultra": "workspace:^",
+    "@sveltejs/package": "^2.3.9",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "svelte": "^5.0.0",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.3.0"
+  }
+}