@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/components/navigation/breadcrumb/breadcrumb-page.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * The leaf. Not a link, because it points at where you already are:
+ * `aria-current="page"` on plain text, not a link that refuses to be followed.
+ */
+export type BreadcrumbPageProps = WithElementRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+declare const BreadcrumbPage: import("svelte").Component<BreadcrumbPageProps, {}, "ref">;
+type BreadcrumbPage = ReturnType<typeof BreadcrumbPage>;
+export default BreadcrumbPage;

package/dist/components/navigation/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,39 @@
+<!--
+  Origin: the React package 2.23.0 `breadcrumb.tsx` (`BreadcrumbSeparator`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLLiAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * `/` rather than a chevron; pass children for a different mark.
+   */
+  export type BreadcrumbSeparatorProps = WithElementRef<HTMLLiAttributes, HTMLLIElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: BreadcrumbSeparatorProps = $props()
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="breadcrumb-separator"
+  aria-hidden="true"
+  class={cn('shrink-0 select-none', className)}
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    /
+  {/if}
+</li>

package/dist/components/navigation/breadcrumb/breadcrumb-separator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLLiAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * `/` rather than a chevron; pass children for a different mark.
+ */
+export type BreadcrumbSeparatorProps = WithElementRef<HTMLLiAttributes, HTMLLIElement>;
+declare const BreadcrumbSeparator: import("svelte").Component<BreadcrumbSeparatorProps, {}, "ref">;
+type BreadcrumbSeparator = ReturnType<typeof BreadcrumbSeparator>;
+export default BreadcrumbSeparator;

package/dist/components/navigation/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,32 @@
+<!--
+  Origin: the React package 2.23.0 `breadcrumb.tsx` (`Breadcrumb`)
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * Written against shadcn/ui's `breadcrumb` API, not ported from it: the names
+   * match so a reader arriving from shadcn finds what they expect. The separator
+   * is `/` and the leaf is not a disabled link.
+   */
+  export type BreadcrumbProps = WithElementRef<HTMLAttributes<HTMLElement>, HTMLElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: BreadcrumbProps = $props()
+</script>
+
+<nav
+  bind:this={ref}
+  data-slot="breadcrumb"
+  aria-label="Breadcrumb"
+  class={cn('min-w-0', className)}
+  {...rest}
+>
+  {@render children?.()}
+</nav>

package/dist/components/navigation/breadcrumb/breadcrumb.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * Written against shadcn/ui's `breadcrumb` API, not ported from it: the names
+ * match so a reader arriving from shadcn finds what they expect. The separator
+ * is `/` and the leaf is not a disabled link.
+ */
+export type BreadcrumbProps = WithElementRef<HTMLAttributes<HTMLElement>, HTMLElement>;
+declare const Breadcrumb: import("svelte").Component<BreadcrumbProps, {}, "ref">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/navigation/breadcrumb/index.d.ts

@@ -0,0 +1,7 @@
+export { type BreadcrumbProps, default as Breadcrumb } from './breadcrumb.svelte';
+export { type BreadcrumbEllipsisProps, default as BreadcrumbEllipsis, } from './breadcrumb-ellipsis.svelte';
+export { type BreadcrumbItemProps, default as BreadcrumbItem } from './breadcrumb-item.svelte';
+export { type BreadcrumbLinkProps, default as BreadcrumbLink } from './breadcrumb-link.svelte';
+export { type BreadcrumbListProps, default as BreadcrumbList } from './breadcrumb-list.svelte';
+export { type BreadcrumbPageProps, default as BreadcrumbPage } from './breadcrumb-page.svelte';
+export { type BreadcrumbSeparatorProps, default as BreadcrumbSeparator, } from './breadcrumb-separator.svelte';

package/dist/components/navigation/breadcrumb/index.js

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './breadcrumb.svelte';
+export { default as BreadcrumbEllipsis, } from './breadcrumb-ellipsis.svelte';
+export { default as BreadcrumbItem } from './breadcrumb-item.svelte';
+export { default as BreadcrumbLink } from './breadcrumb-link.svelte';
+export { default as BreadcrumbList } from './breadcrumb-list.svelte';
+export { default as BreadcrumbPage } from './breadcrumb-page.svelte';
+export { default as BreadcrumbSeparator, } from './breadcrumb-separator.svelte';

package/dist/components/navigation/sidebar/context.svelte.d.ts

@@ -0,0 +1,26 @@
+export declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export declare const SIDEBAR_COOKIE_MAX_AGE: number;
+export declare const SIDEBAR_WIDTH = "16rem";
+export declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+export declare const SIDEBAR_WIDTH_ICON = "56px";
+export declare const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+export interface SidebarStateProps {
+    open: () => boolean;
+    setOpen: (open: boolean) => void;
+    mobileBreakpoint?: number;
+}
+export declare class SidebarState {
+    #private;
+    openMobile: boolean;
+    open: boolean;
+    state: string;
+    constructor(props: SidebarStateProps);
+    get isMobile(): boolean;
+    setOpen: (value: boolean) => void;
+    setOpenMobile: (value: boolean) => void;
+    toggle: () => void;
+    handleShortcutKeydown: (event: KeyboardEvent) => void;
+}
+export declare function setSidebar(props: SidebarStateProps): SidebarState;
+/** The sidebar's state, from inside a SidebarProvider. It is a class instance; do not destructure it. */
+export declare function useSidebar(): SidebarState;

package/dist/components/navigation/sidebar/context.svelte.js

@@ -0,0 +1,61 @@
+/**
+ * Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarContext`, `useSidebar`), itself shadcn/ui new-york `sidebar`
+ * Diverged: React's context and callbacks become a reactive class in Svelte
+ *   context, as shadcn-svelte has it. `open` is read through a getter so
+ *   `bind:open` on SidebarProvider stays the source of truth.
+ */
+import { getContext, setContext } from 'svelte';
+import { DEFAULT_MOBILE_BREAKPOINT, IsMobile } from '../../../hooks/is-mobile.svelte.js';
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '56px';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+export class SidebarState {
+    #props;
+    #isMobile;
+    openMobile = $state(false);
+    open = $derived.by(() => this.#props.open());
+    state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+    constructor(props) {
+        this.#props = props;
+        this.#isMobile = new IsMobile(props.mobileBreakpoint ?? DEFAULT_MOBILE_BREAKPOINT);
+    }
+    get isMobile() {
+        return this.#isMobile.current;
+    }
+    setOpen = (value) => {
+        this.#props.setOpen(value);
+        // The sidebar persists its open state to a cookie so a reload matches the
+        // last choice, as upstream shadcn does.
+        // biome-ignore lint/suspicious/noDocumentCookie: upstream shadcn behaviour
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    };
+    setOpenMobile = (value) => {
+        this.openMobile = value;
+    };
+    toggle = () => {
+        if (this.isMobile)
+            this.openMobile = !this.openMobile;
+        else
+            this.setOpen(!this.open);
+    };
+    handleShortcutKeydown = (event) => {
+        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            this.toggle();
+        }
+    };
+}
+const KEY = Symbol.for('mise-sidebar');
+export function setSidebar(props) {
+    return setContext(KEY, new SidebarState(props));
+}
+/** The sidebar's state, from inside a SidebarProvider. It is a class instance; do not destructure it. */
+export function useSidebar() {
+    const sidebar = getContext(KEY);
+    if (!sidebar)
+        throw new Error('useSidebar must be used within a SidebarProvider.');
+    return sidebar;
+}

package/dist/components/navigation/sidebar/index.d.ts

@@ -0,0 +1,25 @@
+export { SidebarState, useSidebar } from './context.svelte.js';
+export { default as Sidebar, type SidebarProps, type SidebarSideTheme } from './sidebar.svelte';
+export { default as SidebarContent, type SidebarContentProps } from './sidebar-content.svelte';
+export { default as SidebarFooter, type SidebarFooterProps } from './sidebar-footer.svelte';
+export { default as SidebarGroup, type SidebarGroupProps } from './sidebar-group.svelte';
+export { default as SidebarGroupAction, type SidebarGroupActionProps, } from './sidebar-group-action.svelte';
+export { default as SidebarGroupContent, type SidebarGroupContentProps, } from './sidebar-group-content.svelte';
+export { default as SidebarGroupLabel, type SidebarGroupLabelProps, } from './sidebar-group-label.svelte';
+export { default as SidebarHeader, type SidebarHeaderProps } from './sidebar-header.svelte';
+export { default as SidebarInput, type SidebarInputProps } from './sidebar-input.svelte';
+export { default as SidebarInset, type SidebarInsetProps } from './sidebar-inset.svelte';
+export { default as SidebarMenu, type SidebarMenuProps } from './sidebar-menu.svelte';
+export { default as SidebarMenuAction, type SidebarMenuActionProps, } from './sidebar-menu-action.svelte';
+export { default as SidebarMenuBadge, type SidebarMenuBadgeProps, } from './sidebar-menu-badge.svelte';
+export { default as SidebarMenuButton, type SidebarMenuButtonProps, } from './sidebar-menu-button.svelte';
+export { default as SidebarMenuItem, type SidebarMenuItemProps } from './sidebar-menu-item.svelte';
+export { default as SidebarMenuSkeleton, type SidebarMenuSkeletonProps, } from './sidebar-menu-skeleton.svelte';
+export { default as SidebarMenuSub, type SidebarMenuSubProps } from './sidebar-menu-sub.svelte';
+export { default as SidebarMenuSubButton, type SidebarMenuSubButtonProps, } from './sidebar-menu-sub-button.svelte';
+export { default as SidebarMenuSubItem, type SidebarMenuSubItemProps, } from './sidebar-menu-sub-item.svelte';
+export { default as SidebarProvider, type SidebarProviderProps } from './sidebar-provider.svelte';
+export { default as SidebarRail, type SidebarRailProps } from './sidebar-rail.svelte';
+export { default as SidebarSeparator, type SidebarSeparatorProps } from './sidebar-separator.svelte';
+export { default as SidebarTrigger, type SidebarTriggerProps } from './sidebar-trigger.svelte';
+export { type SidebarMenuButtonSize, sidebarMenuButtonVariants } from './sidebar-variants.js';

package/dist/components/navigation/sidebar/index.js

@@ -0,0 +1,25 @@
+export { SidebarState, useSidebar } from './context.svelte.js';
+export { default as Sidebar } from './sidebar.svelte';
+export { default as SidebarContent } from './sidebar-content.svelte';
+export { default as SidebarFooter } from './sidebar-footer.svelte';
+export { default as SidebarGroup } from './sidebar-group.svelte';
+export { default as SidebarGroupAction, } from './sidebar-group-action.svelte';
+export { default as SidebarGroupContent, } from './sidebar-group-content.svelte';
+export { default as SidebarGroupLabel, } from './sidebar-group-label.svelte';
+export { default as SidebarHeader } from './sidebar-header.svelte';
+export { default as SidebarInput } from './sidebar-input.svelte';
+export { default as SidebarInset } from './sidebar-inset.svelte';
+export { default as SidebarMenu } from './sidebar-menu.svelte';
+export { default as SidebarMenuAction, } from './sidebar-menu-action.svelte';
+export { default as SidebarMenuBadge, } from './sidebar-menu-badge.svelte';
+export { default as SidebarMenuButton, } from './sidebar-menu-button.svelte';
+export { default as SidebarMenuItem } from './sidebar-menu-item.svelte';
+export { default as SidebarMenuSkeleton, } from './sidebar-menu-skeleton.svelte';
+export { default as SidebarMenuSub } from './sidebar-menu-sub.svelte';
+export { default as SidebarMenuSubButton, } from './sidebar-menu-sub-button.svelte';
+export { default as SidebarMenuSubItem, } from './sidebar-menu-sub-item.svelte';
+export { default as SidebarProvider } from './sidebar-provider.svelte';
+export { default as SidebarRail } from './sidebar-rail.svelte';
+export { default as SidebarSeparator } from './sidebar-separator.svelte';
+export { default as SidebarTrigger } from './sidebar-trigger.svelte';
+export { sidebarMenuButtonVariants } from './sidebar-variants.js';

package/dist/components/navigation/sidebar/sidebar-content.svelte

@@ -0,0 +1,32 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarContent`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /** Scrolls vertically in icon mode too: a long rail must not lose its last icons off the viewport. */
+  export type SidebarContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: SidebarContentProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-content"
+  data-sidebar="content"
+  class={cn(
+    'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-x-hidden group-data-[collapsible=icon]:overflow-y-auto',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/navigation/sidebar/sidebar-content.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** Scrolls vertically in icon mode too: a long rail must not lose its last icons off the viewport. */
+export type SidebarContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const SidebarContent: import("svelte").Component<SidebarContentProps, {}, "ref">;
+type SidebarContent = ReturnType<typeof SidebarContent>;
+export default SidebarContent;

package/dist/components/navigation/sidebar/sidebar-footer.svelte

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarFooter`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: SidebarFooterProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-footer"
+  data-sidebar="footer"
+  class={cn('flex flex-col gap-2 p-2', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/navigation/sidebar/sidebar-footer.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const SidebarFooter: import("svelte").Component<SidebarFooterProps, {}, "ref">;
+type SidebarFooter = ReturnType<typeof SidebarFooter>;
+export default SidebarFooter;

package/dist/components/navigation/sidebar/sidebar-group-action.svelte

@@ -0,0 +1,50 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarGroupAction`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: React's `asChild` becomes a `child` snippet that receives the
+    part's props, as in BreadcrumbLink.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarGroupActionProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    /** Renders your own element with these props instead of the default one. */
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    child,
+    class: className,
+    children,
+    ...rest
+  }: SidebarGroupActionProps = $props()
+
+  const partProps = $derived({
+    'data-slot': 'sidebar-group-action',
+    'data-sidebar': 'group-action',
+    class: cn(
+      'ring-sidebar-ring absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[sidetheme=primary]:text-white group-data-[sidetheme=primary]:hover:bg-white/20',
+      'group-data-[sidetheme=light]:text-muted-foreground group-data-[sidetheme=light]:hover:bg-black/5 group-data-[sidetheme=light]:hover:text-foreground',
+      'group-data-[sidetheme=panel]:text-muted-foreground group-data-[sidetheme=panel]:hover:bg-sidebar-accent group-data-[sidetheme=panel]:hover:text-sidebar-foreground',
+      'after:absolute after:-inset-2 md:after:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      className,
+    ),
+    ...rest,
+  })
+</script>
+
+{#if child}
+  {@render child({ props: partProps })}
+{:else}
+  <button bind:this={ref} type="button" {...partProps}>{@render children?.()}</button>
+{/if}

package/dist/components/navigation/sidebar/sidebar-group-action.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarGroupActionProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    /** Renders your own element with these props instead of the default one. */
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const SidebarGroupAction: import("svelte").Component<SidebarGroupActionProps, {}, "ref">;
+type SidebarGroupAction = ReturnType<typeof SidebarGroupAction>;
+export default SidebarGroupAction;

package/dist/components/navigation/sidebar/sidebar-group-content.svelte

@@ -0,0 +1,36 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarGroupContent`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarGroupContentProps = WithElementRef<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: SidebarGroupContentProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-group-content"
+  data-sidebar="group-content"
+  class={cn('w-full text-sm', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/navigation/sidebar/sidebar-group-content.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarGroupContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const SidebarGroupContent: import("svelte").Component<SidebarGroupContentProps, {}, "ref">;
+type SidebarGroupContent = ReturnType<typeof SidebarGroupContent>;
+export default SidebarGroupContent;

package/dist/components/navigation/sidebar/sidebar-group-label.svelte

@@ -0,0 +1,51 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarGroupLabel`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: React's `asChild` becomes a `child` snippet that receives the
+    part's props, as in BreadcrumbLink.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarGroupLabelProps = WithElementRef<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > & {
+    /** Renders your own element with these props instead of the default one. */
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    child,
+    class: className,
+    children,
+    ...rest
+  }: SidebarGroupLabelProps = $props()
+
+  const partProps = $derived({
+    'data-slot': 'sidebar-group-label',
+    'data-sidebar': 'group-label',
+    class: cn(
+      'ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      'group-data-[sidetheme=primary]:text-white/70 group-data-[sidetheme=light]:text-muted-foreground',
+      'group-data-[sidetheme=panel]:text-muted-foreground group-data-[sidetheme=panel]:mt-2 group-data-[sidetheme=panel]:mb-0.5 group-data-[sidetheme=panel]:h-6 group-data-[sidetheme=panel]:px-2.5 group-data-[sidetheme=panel]:text-[0.6875rem] group-data-[sidetheme=panel]:font-semibold group-data-[sidetheme=panel]:tracking-[0.08em] group-data-[sidetheme=panel]:uppercase',
+      className,
+    ),
+    ...rest,
+  })
+</script>
+
+{#if child}
+  {@render child({ props: partProps })}
+{:else}
+  <div bind:this={ref} {...partProps}>{@render children?.()}</div>
+{/if}

package/dist/components/navigation/sidebar/sidebar-group-label.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarGroupLabelProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    /** Renders your own element with these props instead of the default one. */
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const SidebarGroupLabel: import("svelte").Component<SidebarGroupLabelProps, {}, "ref">;
+type SidebarGroupLabel = ReturnType<typeof SidebarGroupLabel>;
+export default SidebarGroupLabel;

package/dist/components/navigation/sidebar/sidebar-group.svelte

@@ -0,0 +1,32 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarGroup`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: SidebarGroupProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-group"
+  data-sidebar="group"
+  class={cn(
+    'relative flex w-full min-w-0 flex-col px-4 py-2 group-data-[collapsible=icon]:px-2',
+    'group-data-[sidetheme=panel]:px-2 group-data-[sidetheme=panel]:py-1',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/navigation/sidebar/sidebar-group.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const SidebarGroup: import("svelte").Component<SidebarGroupProps, {}, "ref">;
+type SidebarGroup = ReturnType<typeof SidebarGroup>;
+export default SidebarGroup;

package/dist/components/navigation/sidebar/sidebar-header.svelte

@@ -0,0 +1,33 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarHeader`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: SidebarHeaderProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-header"
+  data-sidebar="header"
+  class={cn(
+    'flex flex-col gap-2 p-2 h-header min-h-header items-center justify-center',
+    'group-data-[sidetheme=primary]:border-white/30 group-data-[sidetheme=light]:border-border',
+    'border-b group-data-[sidetheme=panel]:border-b-0',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/navigation/sidebar/sidebar-header.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare const SidebarHeader: import("svelte").Component<SidebarHeaderProps, {}, "ref">;
+type SidebarHeader = ReturnType<typeof SidebarHeader>;
+export default SidebarHeader;

package/dist/components/navigation/sidebar/sidebar-input.svelte

@@ -0,0 +1,31 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarInput`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { InputProps } from '../../forms/input/input.svelte'
+
+  export type SidebarInputProps = InputProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Input from '../../forms/input/input.svelte'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    ...rest
+  }: SidebarInputProps = $props()
+</script>
+
+<Input
+  bind:ref
+  bind:value
+  data-slot="sidebar-input"
+  data-sidebar="input"
+  class={cn('bg-background h-8 w-full shadow-none', className)}
+  {...rest}
+/>

package/dist/components/navigation/sidebar/sidebar-input.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { InputProps } from '../../forms/input/input.svelte';
+export type SidebarInputProps = InputProps;
+declare const SidebarInput: import("svelte").Component<InputProps, {}, "ref" | "value">;
+type SidebarInput = ReturnType<typeof SidebarInput>;
+export default SidebarInput;