kosui 0.4.0 → 0.5.0

package/dist/drawer/drawer.svelte

@@ -0,0 +1,51 @@
+<script module lang="ts">
+  import { Modal, type ModalProps } from "../modal/index.js";
+  import { cn } from "../utils.js";
+  import { prefersReducedMotion } from "svelte/motion";
+  import { fly } from "svelte/transition";
+
+  export type DrawerSide = "start" | "end";
+
+  export type DrawerProps = {
+    side?: DrawerSide;
+  } & Omit<ModalProps, "transition">;
+</script>
+
+<script lang="ts">
+  let {
+    el = $bindable(),
+    open = $bindable(),
+    side = "start",
+    shape = "lg",
+    class: className,
+    children,
+    ...restProps
+  }: DrawerProps = $props();
+
+  function slide(node: Element) {
+    const rtl = getComputedStyle(node).direction === "rtl";
+    const fromLeft = (side === "start") !== rtl;
+    return fly(node, {
+      x: fromLeft ? "-100%" : "100%",
+      opacity: 1,
+      duration: prefersReducedMotion.current ? 0 : 200,
+    });
+  }
+</script>
+
+<Modal
+  bind:el
+  bind:open
+  {shape}
+  transition={slide}
+  class={cn(
+    "my-0 h-full max-h-none w-80 max-w-[calc(100%-3.5rem)] overflow-y-auto bg-m3-surface-container-low p-3",
+    side === "start"
+      ? "ms-0 me-auto rounded-s-none"
+      : "ms-auto me-0 rounded-e-none",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children()}
+</Modal>

package/dist/drawer/drawer.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ModalProps } from "../modal/index.js";
+export type DrawerSide = "start" | "end";
+export type DrawerProps = {
+    side?: DrawerSide;
+} & Omit<ModalProps, "transition">;
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "el" | "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/drawer/index.d.ts

@@ -0,0 +1 @@
+export { default as Drawer, type DrawerProps, type DrawerSide, } from "./drawer.svelte";

package/dist/drawer/index.js

@@ -0,0 +1 @@
+export { default as Drawer, } from "./drawer.svelte";

package/dist/fab/fab.svelte

@@ -36,7 +36,7 @@
   class={cn(
     "sticky top-[calc(100%-var(--fab-height))] bottom-0 left-[calc(100%-var(--fab-width))] flex transition",
     restProps.children && "w-fit",
-    !clear && "mt-[calc(-1*var(--fab-height))]",
+    !clear && "-mt-(--fab-height)",
     className,
   )}
   style="--fab-width: {width}px; --fab-height: {height}px; {style ?? ''}"

package/dist/index.d.ts

@@ -22,12 +22,14 @@ export * from "./chip/index.js";
 export * from "./command/index.js";
 export * from "./common/index.js";
 export * from "./dialog/index.js";
+export * from "./drawer/index.js";
 export * from "./fab/index.js";
 export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./markdown/index.js";
 export * from "./menu/index.js";
 export * from "./modal/index.js";
+export * from "./nav/index.js";
 export * from "./popover/index.js";
 export * from "./progress/index.js";
 export * from "./shortcut/index.js";

package/dist/index.js

@@ -22,12 +22,14 @@ export * from "./chip/index.js";
 export * from "./command/index.js";
 export * from "./common/index.js";
 export * from "./dialog/index.js";
+export * from "./drawer/index.js";
 export * from "./fab/index.js";
 export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./markdown/index.js";
 export * from "./menu/index.js";
 export * from "./modal/index.js";
+export * from "./nav/index.js";
 export * from "./popover/index.js";
 export * from "./progress/index.js";
 export * from "./shortcut/index.js";

package/dist/modal/modal.svelte

@@ -6,11 +6,12 @@
   import type { Snippet } from "svelte";
   import type { HTMLDialogAttributes } from "svelte/elements";
   import { prefersReducedMotion } from "svelte/motion";
-  import { scale } from "svelte/transition";
+  import { scale, type TransitionConfig } from "svelte/transition";
 
   export type ModalProps = {
     el?: HTMLDialogElement;
     onCancel?: () => void;
+    transition?: (node: Element) => TransitionConfig;
     children: Snippet;
   } & ClassName &
     ShapeProp &
@@ -20,6 +21,13 @@
 
   const layers: Layer[] = [];
 
+  function zoom(node: Element) {
+    return scale(node, {
+      duration: prefersReducedMotion.current ? 0 : 150,
+      start: 0.95,
+    });
+  }
+
   function focusedElement() {
     const active = document.activeElement;
     return active instanceof HTMLElement && active !== document.body
@@ -46,6 +54,7 @@
     el = $bindable(),
     open = $bindable(),
     onCancel,
+    transition = zoom,
     children,
     shape = "xl",
     class: className,
@@ -85,10 +94,7 @@
       baseClasses({ shape }),
       className,
     )}
-    transition:scale={{
-      duration: prefersReducedMotion.current ? 0 : 150,
-      start: 0.95,
-    }}
+    transition:transition
     {...mergeProps(restProps, {
       oncancel,
       onintrostart: () => el?.removeAttribute("data-closing"),

package/dist/modal/modal.svelte.d.ts

@@ -2,9 +2,11 @@ import { type ShapeProp } from "../base.js";
 import { type ClassName } from "../utils.js";
 import type { Snippet } from "svelte";
 import type { HTMLDialogAttributes } from "svelte/elements";
+import { type TransitionConfig } from "svelte/transition";
 export type ModalProps = {
     el?: HTMLDialogElement;
     onCancel?: () => void;
+    transition?: (node: Element) => TransitionConfig;
     children: Snippet;
 } & ClassName & ShapeProp & Omit<HTMLDialogAttributes, "class">;
 declare const Modal: import("svelte").Component<ModalProps, {}, "el" | "open">;

package/dist/nav/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NavGroup, type NavGroupProps } from "./nav-group.svelte";
+export { default as NavItem, type NavItemProps } from "./nav-item.svelte";

package/dist/nav/index.js

@@ -0,0 +1,2 @@
+export { default as NavGroup } from "./nav-group.svelte";
+export { default as NavItem } from "./nav-item.svelte";

package/dist/nav/nav-group.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type NavGroupProps = {
+    label: string;
+    children: Snippet;
+  } & ElementRef &
+    ClassName &
+    Omit<HTMLAttributes<HTMLDivElement>, "class">;
+</script>
+
+<script lang="ts">
+  let {
+    label,
+    children,
+    el = $bindable(),
+    class: className,
+    ...restProps
+  }: NavGroupProps = $props();
+
+  const id = $props.id();
+</script>
+
+<div
+  bind:this={el}
+  role="group"
+  aria-labelledby="{id}-label"
+  class={cn("flex flex-col gap-0.5", className)}
+  {...restProps}
+>
+  <div
+    id="{id}-label"
+    class="px-4 pt-4 pb-1 text-xs font-medium tracking-wide text-m3-on-surface-variant uppercase"
+  >
+    {label}
+  </div>
+  {@render children()}
+</div>

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

@@ -0,0 +1,10 @@
+import { type ClassName, type ElementRef } from "../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type NavGroupProps = {
+    label: string;
+    children: Snippet;
+} & ElementRef & ClassName & Omit<HTMLAttributes<HTMLDivElement>, "class">;
+declare const NavGroup: import("svelte").Component<NavGroupProps, {}, "el">;
+type NavGroup = ReturnType<typeof NavGroup>;
+export default NavGroup;

package/dist/nav/nav-item.svelte

@@ -0,0 +1,65 @@
+<script module lang="ts">
+  import {
+    baseClasses,
+    type ShapeProp,
+    type Size,
+    type SizeProp,
+  } from "../base.js";
+  import { cn, type ClassName, type ElementRef } from "../utils.js";
+  import type { LucideIcon } from "@lucide/svelte";
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  export type NavItemProps = {
+    href: string;
+    current?: boolean;
+    icon?: LucideIcon;
+    children: Snippet;
+  } & ElementRef &
+    ClassName &
+    ShapeProp &
+    SizeProp &
+    Omit<HTMLAnchorAttributes, "href">;
+
+  const SIZES: Record<Size, string> = {
+    xs: "h-7 gap-2 px-3 text-xs",
+    sm: "h-9 gap-3 px-4 text-sm",
+    md: "h-11 gap-3 px-4 text-sm",
+    lg: "h-13 gap-3 px-4 text-base",
+    xl: "h-15 gap-4 px-5 text-base",
+  };
+</script>
+
+<script lang="ts">
+  let {
+    href,
+    current = false,
+    icon: Icon,
+    children,
+    el = $bindable(),
+    class: className,
+    shape = "full",
+    size = "md",
+    ...restProps
+  }: NavItemProps = $props();
+</script>
+
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+<a
+  bind:this={el}
+  {href}
+  aria-current={current ? "page" : undefined}
+  class={cn(
+    baseClasses({ shape }),
+    SIZES[size],
+    "flex shrink-0 items-center text-m3-on-surface-variant hover:bg-m3-on-surface/8 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-m3-secondary aria-[current=page]:bg-m3-secondary-container aria-[current=page]:font-medium aria-[current=page]:text-m3-on-secondary-container",
+    className,
+  )}
+  {...restProps}
+>
+  {#if Icon}
+    <Icon class="size-[1.25em] shrink-0" />
+  {/if}
+  {@render children()}
+</a>
+<!-- eslint-enable svelte/no-navigation-without-resolve -->

package/dist/nav/nav-item.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type ShapeProp, type SizeProp } from "../base.js";
+import { type ClassName, type ElementRef } from "../utils.js";
+import type { LucideIcon } from "@lucide/svelte";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+export type NavItemProps = {
+    href: string;
+    current?: boolean;
+    icon?: LucideIcon;
+    children: Snippet;
+} & ElementRef & ClassName & ShapeProp & SizeProp & Omit<HTMLAnchorAttributes, "href">;
+declare const NavItem: import("svelte").Component<NavItemProps, {}, "el">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kosui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "license": "MIT",
   "repository": {