kosui 0.0.26 → 0.0.27

package/dist/portal/proxy.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Snippet } from "svelte";
-type Props = {
+import { type Snippet } from "svelte";
+export type ProxyProps = {
     children?: Snippet;
 };
-declare const Proxy: import("svelte").Component<Props, {}, "">;
+declare const Proxy: import("svelte").Component<ProxyProps, {}, "">;
 type Proxy = ReturnType<typeof Proxy>;
 export default Proxy;

package/dist/progress/circular-progress.svelte

@@ -1,9 +1,6 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  const DASH_ARRAY = 2 * 3.1415926535 * 10;
-
-  type Props = {
+<script lang="ts" module>
+  import { type Snippet } from "svelte";
+  export type CircularProgressProps = {
     children?: Snippet;
     progress?: number;
     size?: string | number;
@@ -12,6 +9,10 @@
     color?: string;
     class?: string;
   };
+</script>
+
+<script lang="ts">
+  const DASH_ARRAY = 2 * 3.1415926535 * 10;
 
   const {
     children,
@@ -21,7 +22,7 @@
     textColor = "currentColor",
     color = "currentColor",
     class: className,
-  }: Props = $props();
+  }: CircularProgressProps = $props();
 </script>
 
 <svg

package/dist/progress/circular-progress.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from "svelte";
-type Props = {
+import { type Snippet } from "svelte";
+export type CircularProgressProps = {
     children?: Snippet;
     progress?: number;
     size?: string | number;
@@ -8,6 +8,6 @@ type Props = {
     color?: string;
     class?: string;
 };
-declare const CircularProgress: import("svelte").Component<Props, {}, "">;
+declare const CircularProgress: import("svelte").Component<CircularProgressProps, {}, "">;
 type CircularProgress = ReturnType<typeof CircularProgress>;
 export default CircularProgress;

package/dist/progress/index.d.ts

@@ -1 +1 @@
-export { default as CircularProgress } from "./circular-progress.svelte";
+export { default as CircularProgress, type CircularProgressProps, } from "./circular-progress.svelte";

package/dist/progress/index.js

@@ -1 +1 @@
-export { default as CircularProgress } from "./circular-progress.svelte";
+export { default as CircularProgress, } from "./circular-progress.svelte";

package/dist/shortcut/index.d.ts

@@ -1,2 +1,2 @@
-export { Shortcut } from "./shortcut";
 export { default as ShortcutBadge, type ShortcutBadgeProps, } from "./shortcut-badge.svelte";
+export { Shortcut } from "./shortcut.js";

package/dist/shortcut/index.js

@@ -1,2 +1,2 @@
-export { Shortcut } from "./shortcut";
 export { default as ShortcutBadge, } from "./shortcut-badge.svelte";
+export { Shortcut } from "./shortcut.js";

package/dist/shortcut/shortcut-badge.svelte

@@ -1,9 +1,9 @@
 <script module lang="ts">
-  import type { HTMLInputAttributes } from "svelte/elements";
+  import { Box } from "../box/index.js";
+  import { type Shortcut } from "./index.js";
+  import { noop, type ClassName, type ElementRef } from "../utils.js";
+  import { type HTMLInputAttributes } from "svelte/elements";
   import { twMerge, type ClassNameValue } from "tailwind-merge";
-  import { Box } from "../box";
-  import { noop, type ClassName, type ElementRef } from "../utils";
-  import type { Shortcut } from "./shortcut";
 
   export type ShortcutBadgeProps = {
     shortcut: Shortcut;

package/dist/shortcut/shortcut-badge.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { HTMLInputAttributes } from "svelte/elements";
+import { type Shortcut } from "./index.js";
+import { type ClassName, type ElementRef } from "../utils.js";
+import { type HTMLInputAttributes } from "svelte/elements";
 import { type ClassNameValue } from "tailwind-merge";
-import { type ClassName, type ElementRef } from "../utils";
-import type { Shortcut } from "./shortcut";
 export type ShortcutBadgeProps = {
     shortcut: Shortcut;
     badgeClass?: ClassNameValue;

package/dist/skeleton/skeleton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { Snippet } from "svelte";
+  import { Box, type BoxProps } from "../box/index.js";
+  import { type Snippet } from "svelte";
   import { twMerge } from "tailwind-merge";
-  import { Box, type BoxProps } from "../box";
 
   export type SkeletonProps = { children?: Snippet } & BoxProps;
   let {

package/dist/skeleton/skeleton.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from "svelte";
-import { type BoxProps } from "../box";
+import { type BoxProps } from "../box/index.js";
+import { type Snippet } from "svelte";
 export type SkeletonProps = {
     children?: Snippet;
 } & BoxProps;

package/dist/switch/index.d.ts

@@ -1 +1,2 @@
+export { default as SwitchThumb, type SwitchThumbProps, } from "./switch-thumb.svelte";
 export { default as Switch, SWITCH_COLORS, SWITCH_RADII, SWITCH_SIZES, type SwitchColor, type SwitchColorProp, type SwitchProps, type SwitchRadius, type SwitchRadiusProp, type SwitchSize, type SwitchSizeProp, } from "./switch.svelte";

package/dist/switch/index.js

@@ -1 +1,2 @@
+export { default as SwitchThumb, } from "./switch-thumb.svelte";
 export { default as Switch, SWITCH_COLORS, SWITCH_RADII, SWITCH_SIZES, } from "./switch.svelte";

package/dist/switch/switch-thumb.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  import type {
+    SwitchColorProp,
+    SwitchRadiusProp,
+    SwitchSizeProp,
+  } from "./index.js";
+  import { type ClassName } from "../utils.js";
+  import { type HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+
+  export type SwitchThumbProps = {} & ClassName &
+    SwitchColorProp &
+    SwitchSizeProp &
+    SwitchRadiusProp &
+    HTMLAttributes<HTMLDivElement>;
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    color = "primary",
+    size = "sm",
+    radius = "xl",
+    ...restProps
+  }: SwitchThumbProps = $props();
+</script>
+
+<div
+  class={twMerge(
+    "absolute top-0.5 left-0.5 shadow-sm transition-all",
+
+    color === "primary" && "bg-m3-on-primary",
+    color === "secondary" && "bg-m3-on-secondary",
+    color === "tertiary" && "bg-m3-on-tertiary",
+    color === "error" && "bg-m3-on-error",
+
+    size === "xs" && "size-3 group-aria-checked:translate-x-4",
+    size === "sm" && "size-4 group-aria-checked:translate-x-5",
+    size === "md" && "size-5 group-aria-checked:translate-x-6",
+    size === "lg" && "size-6 group-aria-checked:translate-x-7",
+    size === "xl" && "size-7 group-aria-checked:translate-x-8",
+
+    radius === "xs" && "rounded-xs",
+    radius === "sm" && "rounded-sm",
+    radius === "md" && "rounded-lg",
+    radius === "lg" && "rounded-2xl",
+    radius === "xl" && "rounded-4xl",
+
+    className,
+  )}
+  {...restProps}
+></div>

package/dist/switch/switch-thumb.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SwitchColorProp, SwitchRadiusProp, SwitchSizeProp } from "./index.js";
+import { type ClassName } from "../utils.js";
+import { type HTMLAttributes } from "svelte/elements";
+export type SwitchThumbProps = {} & ClassName & SwitchColorProp & SwitchSizeProp & SwitchRadiusProp & HTMLAttributes<HTMLDivElement>;
+declare const SwitchThumb: import("svelte").Component<SwitchThumbProps, {}, "">;
+type SwitchThumb = ReturnType<typeof SwitchThumb>;
+export default SwitchThumb;

package/dist/switch/switch.svelte

@@ -1,6 +1,4 @@
 <script lang="ts" module>
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
   import {
     COLORS,
     RADII,
@@ -11,9 +9,13 @@
     type RadiusProp,
     type Size,
     type SizeProp,
-  } from "../base";
-  import { mergeProps } from "../merge-props";
-  import type { ClassName } from "../utils";
+  } from "../base.js";
+  import { mergeProps } from "../merge-props.js";
+  import { SwitchThumb, type SwitchThumbProps } from "./index.js";
+  import { type ClassName } from "../utils.js";
+  import { type Snippet } from "svelte";
+  import { type HTMLButtonAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
 
   export const SWITCH_COLORS = COLORS;
   export type SwitchColor = Color;
@@ -29,16 +31,18 @@
 
   export type SwitchProps = {
     checked?: boolean;
+    thumb?: Snippet<[SwitchThumbProps]>;
   } & ClassName &
+    SwitchColorProp &
     SwitchSizeProp &
     SwitchRadiusProp &
-    SwitchColorProp &
     HTMLButtonAttributes;
 </script>
 
 <script lang="ts">
   let {
     checked = $bindable(false),
+    thumb = defaultThumb,
     class: className,
     color = "primary",
     size = "sm",
@@ -47,6 +51,10 @@
   }: SwitchProps = $props();
 </script>
 
+{#snippet defaultThumb(props: SwitchThumbProps)}
+  <SwitchThumb {...props} />
+{/snippet}
+
 <button
   type="button"
   role="switch"
@@ -79,27 +87,5 @@
   )}
   {...mergeProps(restProps, { onclick: () => (checked = !checked) })}
 >
-  <!-- Thumb -->
-  <div
-    class={twMerge(
-      "absolute top-0.5 left-0.5 shadow-sm transition-all",
-
-      color === "primary" && "bg-m3-on-primary",
-      color === "secondary" && "bg-m3-on-secondary",
-      color === "tertiary" && "bg-m3-on-tertiary",
-      color === "error" && "bg-m3-on-error",
-
-      size === "xs" && "size-3 group-aria-checked:translate-x-4",
-      size === "sm" && "size-4 group-aria-checked:translate-x-5",
-      size === "md" && "size-5 group-aria-checked:translate-x-6",
-      size === "lg" && "size-6 group-aria-checked:translate-x-7",
-      size === "xl" && "size-7 group-aria-checked:translate-x-8",
-
-      radius === "xs" && "rounded-xs",
-      radius === "sm" && "rounded-sm",
-      radius === "md" && "rounded-lg",
-      radius === "lg" && "rounded-2xl",
-      radius === "xl" && "rounded-4xl",
-    )}
-  ></div>
+  {@render thumb({ color, size, radius })}
 </button>

package/dist/switch/switch.svelte.d.ts

@@ -1,6 +1,8 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
-import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base";
-import type { ClassName } from "../utils";
+import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
+import { type SwitchThumbProps } from "./index.js";
+import { type ClassName } from "../utils.js";
+import { type Snippet } from "svelte";
+import { type HTMLButtonAttributes } from "svelte/elements";
 export declare const SWITCH_COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
 export type SwitchColor = Color;
 export type SwitchColorProp = ColorProp;
@@ -12,7 +14,8 @@ export type SwitchRadius = Radius;
 export type SwitchRadiusProp = RadiusProp;
 export type SwitchProps = {
     checked?: boolean;
-} & ClassName & SwitchSizeProp & SwitchRadiusProp & SwitchColorProp & HTMLButtonAttributes;
+    thumb?: Snippet<[SwitchThumbProps]>;
+} & ClassName & SwitchColorProp & SwitchSizeProp & SwitchRadiusProp & HTMLButtonAttributes;
 declare const Switch: import("svelte").Component<SwitchProps, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/textarea/textarea.svelte

@@ -9,9 +9,9 @@
     type RadiusProp,
     type Size,
     type SizeProp,
-  } from "..";
-  import { type ClassName } from "../utils";
-  import type { HTMLTextareaAttributes } from "svelte/elements";
+  } from "../base.js";
+  import { type ClassName } from "../utils.js";
+  import { type HTMLTextareaAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 
   export const TEXTAREA_VARIANTS = ["outlined", "filled", "inherit"] as const;

package/dist/textarea/textarea.svelte.d.ts

@@ -1,6 +1,6 @@
-import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "..";
-import { type ClassName } from "../utils";
-import type { HTMLTextareaAttributes } from "svelte/elements";
+import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
+import { type ClassName } from "../utils.js";
+import { type HTMLTextareaAttributes } from "svelte/elements";
 export declare const TEXTAREA_VARIANTS: readonly ["outlined", "filled", "inherit"];
 export type TextareaVariant = (typeof TEXTAREA_VARIANTS)[number];
 export type TextareaVariantProp = {

package/dist/toggle/index.d.ts

@@ -1,2 +1,3 @@
-export { default as ToggleButton } from "./toggle-button.svelte";
-export { default as ToggleGroup } from "./toggle-group.svelte";
+export { default as ToggleButton, type ToggleButtonProps, } from "./toggle-button.svelte";
+export { getToggleContext, setToggleContext, ToggleContext, } from "./toggle-context.svelte.js";
+export { default as ToggleGroup, type ToggleGroupProps, } from "./toggle-group.svelte";

package/dist/toggle/index.js

@@ -1,2 +1,3 @@
-export { default as ToggleButton } from "./toggle-button.svelte";
-export { default as ToggleGroup } from "./toggle-group.svelte";
+export { default as ToggleButton, } from "./toggle-button.svelte";
+export { getToggleContext, setToggleContext, ToggleContext, } from "./toggle-context.svelte.js";
+export { default as ToggleGroup, } from "./toggle-group.svelte";

package/dist/toggle/toggle-button.svelte

@@ -1,11 +1,11 @@
 <script module lang="ts">
-  import type { Snippet } from "svelte";
-  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { type Variants } from "../base.js";
+  import { mergeProps } from "../merge-props.js";
+  import { getToggleContext } from "./index.js";
+  import { noop, type ClassName, type ElementRef } from "../utils.js";
+  import { type Snippet } from "svelte";
+  import { type HTMLButtonAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
-  import { type Variants } from "../base";
-  import { mergeProps } from "../merge-props";
-  import { noop, type ClassName, type ElementRef } from "../utils";
-  import { getToggleContext } from "./toggle-context.svelte";
 
   export type ToggleButtonProps<T> = {
     value: T;

package/dist/toggle/toggle-button.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
-import { type Variants } from "../base";
-import { type ClassName, type ElementRef } from "../utils";
+import { type Variants } from "../base.js";
+import { type ClassName, type ElementRef } from "../utils.js";
+import { type Snippet } from "svelte";
+import { type HTMLButtonAttributes } from "svelte/elements";
 export type ToggleButtonProps<T> = {
     value: T;
     children: Snippet;

package/dist/toggle/toggle-group.svelte

@@ -1,9 +1,9 @@
 <script module lang="ts">
+  import { setToggleContext, ToggleContext } from "./index.js";
+  import { noop, type ClassName, type ElementRef } from "../utils.js";
   import { type Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
+  import { type HTMLAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
-  import { noop, type ClassName, type ElementRef } from "../utils";
-  import { setToggleContext, ToggleContext } from "./toggle-context.svelte";
 
   export type ToggleGroupProps<T> = {
     value?: T;

package/dist/toggle/toggle-group.svelte.d.ts

@@ -1,6 +1,6 @@
+import { type ClassName, type ElementRef } from "../utils.js";
 import { type Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-import { type ClassName, type ElementRef } from "../utils";
+import { type HTMLAttributes } from "svelte/elements";
 export type ToggleGroupProps<T> = {
     value?: T;
     onChange?: (value?: T) => void;

package/dist/tooltip/tooltip.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
+  import { Popover, type PopoverProps } from "../popover/index.js";
+  import { type ClassName } from "../utils.js";
   import { type Snippet } from "svelte";
   import { twMerge } from "tailwind-merge";
-  import { Popover, type PopoverProps } from "../popover";
-  import type { ClassName } from "../utils";
 
   export type TooltipTriggerProps = {
     ref: (el: HTMLElement) => void;

package/dist/tooltip/tooltip.svelte.d.ts

@@ -1,6 +1,6 @@
+import { type PopoverProps } from "../popover/index.js";
+import { type ClassName } from "../utils.js";
 import { type Snippet } from "svelte";
-import { type PopoverProps } from "../popover";
-import type { ClassName } from "../utils";
 export type TooltipTriggerProps = {
     ref: (el: HTMLElement) => void;
     onclick?: () => void;

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameValue } from "tailwind-merge";
+import { type ClassNameValue } from "tailwind-merge";
 export declare function noop(): void;
 export type ElementRef = {
     el?: HTMLElement;

package/dist/utils.js

@@ -1,3 +1,4 @@
+import {} from "tailwind-merge";
 export function noop() { }
 export function uid({ prefix = "", separator = "-" } = {}) {
     const parts = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kosui",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -51,6 +51,8 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-svelte": "^3.0.0",
     "globals": "^16.0.0",
+    "highlight.js": "^11.11.1",
+    "highlight.svelte": "^0.1.3",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.6",
     "prettier": "^3.4.2",
@@ -78,7 +80,7 @@
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",
     "test:unit": "vitest",
-    "test": "pnpm test:unit -- --run && pnpm test:e2e",
+    "test": "pnpm run \"/^(build|check|lint|test:unit)$/\"",
     "test:e2e": "playwright test",
     "ci:publish": "changeset publish"
   }