@cloudvoyant/helical-svelte 0.19.0

package/dist/select/SelectValue.svelte

@@ -0,0 +1,18 @@
+<!-- libs/helical-svelte/src/select/SelectValue.svelte -->
+<!-- Closely based on: Shark UI select (@ark-ui/svelte/select), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { SelectValueText, type SelectValueTextProps } from '@ark-ui/svelte/select';
+  import { selectValueBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: SelectValueTextProps = $props();
+
+  const classes = $derived(cn(selectValueBase, className));
+</script>
+
+{#if children}
+  <SelectValueText class={classes} {...rest}>
+    {@render children()}
+  </SelectValueText>
+{:else}
+  <SelectValueText class={classes} {...rest} />
+{/if}

package/dist/select/SelectValue.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type SelectValueTextProps } from '@ark-ui/svelte/select';
+declare const SelectValue: import("svelte").Component<SelectValueTextProps, {}, "">;
+type SelectValue = ReturnType<typeof SelectValue>;
+export default SelectValue;

package/dist/select/index.d.ts

@@ -0,0 +1,13 @@
+export { default as Select } from './Select.svelte';
+export { default as SelectTrigger } from './SelectTrigger.svelte';
+export { default as SelectValue } from './SelectValue.svelte';
+export { default as SelectIndicator } from './SelectIndicator.svelte';
+export { default as SelectClearTrigger } from './SelectClearTrigger.svelte';
+export { default as SelectContent } from './SelectContent.svelte';
+export { default as SelectItemGroup } from './SelectItemGroup.svelte';
+export { default as SelectItemGroupLabel } from './SelectItemGroupLabel.svelte';
+export { default as SelectItem } from './SelectItem.svelte';
+export { default as SelectItemText } from './SelectItemText.svelte';
+export { default as SelectItemIndicator } from './SelectItemIndicator.svelte';
+export { default as SelectNative } from './SelectNative.svelte';
+export { useSelect } from './SelectContext.svelte';

package/dist/select/index.js

@@ -0,0 +1,14 @@
+// libs/helical-svelte/src/select/index.ts
+export { default as Select } from './Select.svelte';
+export { default as SelectTrigger } from './SelectTrigger.svelte';
+export { default as SelectValue } from './SelectValue.svelte';
+export { default as SelectIndicator } from './SelectIndicator.svelte';
+export { default as SelectClearTrigger } from './SelectClearTrigger.svelte';
+export { default as SelectContent } from './SelectContent.svelte';
+export { default as SelectItemGroup } from './SelectItemGroup.svelte';
+export { default as SelectItemGroupLabel } from './SelectItemGroupLabel.svelte';
+export { default as SelectItem } from './SelectItem.svelte';
+export { default as SelectItemText } from './SelectItemText.svelte';
+export { default as SelectItemIndicator } from './SelectItemIndicator.svelte';
+export { default as SelectNative } from './SelectNative.svelte';
+export { useSelect } from './SelectContext.svelte';

package/dist/sidebar/Content.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helical-svelte/src/SidebarContent.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import Col from '../Col.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Col data-slot="sidebar-content" data-sidebar="content" class={cn(sidebarStyles.contentClass, className)} {...rest}>
+  {@render children?.()}
+</Col>

package/dist/sidebar/Content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Content: import("svelte").Component<Props, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/sidebar/Footer.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helical-svelte/src/SidebarFooter.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import Col from '../Col.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Col data-slot="sidebar-footer" data-sidebar="footer" class={cn(sidebarStyles.footerClass, className)} {...rest}>
+  {@render children?.()}
+</Col>

package/dist/sidebar/Footer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/sidebar/Group.svelte

@@ -0,0 +1,27 @@
+<!-- libs/helical-svelte/src/sidebar/Group.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import Col from '../Col.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    label?: string;
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { label, class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Col data-slot="sidebar-group" data-sidebar="group" class={cn(sidebarStyles.groupClass, className)} {...rest}>
+  {#if label}
+    <div data-slot="sidebar-group-label" data-sidebar="group-label" class={cn(sidebarStyles.groupLabelClass)}>
+      {label}
+    </div>
+  {/if}
+  <div data-slot="sidebar-group-content" data-sidebar="group-content" class={cn(sidebarStyles.groupContentClass)}>
+    {@render children?.()}
+  </div>
+</Col>

package/dist/sidebar/Group.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    label?: string;
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Group: import("svelte").Component<Props, {}, "">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/sidebar/GroupAction.svelte

@@ -0,0 +1,28 @@
+<!-- libs/helical-svelte/src/SidebarGroupAction.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    asChild?: Snippet<[(props: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>]>;
+    class?: string;
+    children?: Snippet;
+  } & HTMLButtonAttributes;
+
+  let { asChild, class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Ark
+  as="button"
+  data-slot="sidebar-group-action"
+  data-sidebar="group-action"
+  {asChild}
+  type="button"
+  class={cn(sidebarStyles.groupActionClass, className)}
+  {...rest}
+>
+  {@render children?.()}
+</Ark>

package/dist/sidebar/GroupAction.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
+type Props = {
+    asChild?: Snippet<[(props: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>]>;
+    class?: string;
+    children?: Snippet;
+} & HTMLButtonAttributes;
+declare const GroupAction: import("svelte").Component<Props, {}, "">;
+type GroupAction = ReturnType<typeof GroupAction>;
+export default GroupAction;

package/dist/sidebar/Header.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helical-svelte/src/SidebarHeader.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import Col from '../Col.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Col data-slot="sidebar-header" data-sidebar="header" class={cn(sidebarStyles.headerClass, className)} {...rest}>
+  {@render children?.()}
+</Col>

package/dist/sidebar/Header.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/sidebar/Input.svelte

@@ -0,0 +1,21 @@
+<!-- libs/helical-svelte/src/SidebarInput.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+  } & HTMLInputAttributes;
+
+  let { class: className = '', ...rest }: Props = $props();
+</script>
+
+<Ark
+  as="input"
+  data-slot="sidebar-input"
+  data-sidebar="input"
+  class={cn(sidebarStyles.inputClass, className)}
+  {...rest}
+/>

package/dist/sidebar/Input.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+} & HTMLInputAttributes;
+declare const Input: import("svelte").Component<Props, {}, "">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/sidebar/Inset.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helical-svelte/src/sidebar/Inset.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Ark as="main" data-slot="sidebar-inset" class={cn(sidebarStyles.insetClass, className)} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/sidebar/Inset.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLElement>;
+declare const Inset: import("svelte").Component<Props, {}, "">;
+type Inset = ReturnType<typeof Inset>;
+export default Inset;

package/dist/sidebar/Menu.svelte

@@ -0,0 +1,19 @@
+<!-- libs/helical-svelte/src/SidebarMenu.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLUListElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Ark as="ul" data-slot="sidebar-menu" data-sidebar="menu" class={cn(sidebarStyles.menuClass, className)} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/sidebar/Menu.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLUListElement>;
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/sidebar/MenuAction.svelte

@@ -0,0 +1,34 @@
+<!-- libs/helical-svelte/src/SidebarMenuAction.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    asChild?: Snippet<[(props: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>]>;
+    showOnHover?: boolean;
+    class?: string;
+    children?: Snippet;
+  } & HTMLButtonAttributes;
+
+  let { asChild, showOnHover = false, class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Ark
+  as="button"
+  data-slot="sidebar-menu-action"
+  data-sidebar="menu-action"
+  {asChild}
+  type="button"
+  class={cn(
+    sidebarStyles.menuActionClass,
+    showOnHover &&
+      'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</Ark>

package/dist/sidebar/MenuAction.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
+type Props = {
+    asChild?: Snippet<[(props: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>]>;
+    showOnHover?: boolean;
+    class?: string;
+    children?: Snippet;
+} & HTMLButtonAttributes;
+declare const MenuAction: import("svelte").Component<Props, {}, "">;
+type MenuAction = ReturnType<typeof MenuAction>;
+export default MenuAction;

package/dist/sidebar/MenuBadge.svelte

@@ -0,0 +1,25 @@
+<!-- libs/helical-svelte/src/SidebarMenuBadge.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Ark
+  as="div"
+  data-slot="sidebar-menu-badge"
+  data-sidebar="menu-badge"
+  class={cn(sidebarStyles.menuBadgeClass, className)}
+  {...rest}
+>
+  {@render children?.()}
+</Ark>

package/dist/sidebar/MenuBadge.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const MenuBadge: import("svelte").Component<Props, {}, "">;
+type MenuBadge = ReturnType<typeof MenuBadge>;
+export default MenuBadge;

package/dist/sidebar/MenuButton.svelte

@@ -0,0 +1,80 @@
+<!-- libs/helical-svelte/src/SidebarMenuButton.svelte -->
+<!-- Source: @ark-ui/svelte/factory + tooltip (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { TooltipRoot, TooltipTrigger, TooltipPositioner, TooltipContent } from '@ark-ui/svelte/tooltip';
+  import { sidebarMenuButtonVariants, sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import { getSidebarContext } from './context.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
+
+  type TooltipContentProps = {
+    class?: string;
+    children?: Snippet;
+  };
+
+  type Props = {
+    asChild?: Snippet<[(props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>]>;
+    isActive?: boolean;
+    variant?: 'default' | 'outline';
+    size?: 'default' | 'sm' | 'lg';
+    tooltip?: string | TooltipContentProps;
+    class?: string;
+    children?: Snippet;
+  } & HTMLButtonAttributes;
+
+  let {
+    asChild,
+    isActive = false,
+    variant = 'default',
+    size = 'default',
+    tooltip,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+
+  const sidebar = getSidebarContext();
+  const state = $derived(sidebar.state);
+  const isMobile = $derived(sidebar.isMobile);
+
+  const classes = $derived(cn(sidebarMenuButtonVariants({ variant, size }), className));
+
+  const showTooltip = $derived(Boolean(tooltip) && state === 'collapsed' && !isMobile);
+</script>
+
+{#snippet button(propsFn: (props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement> = () => ({}))}
+  <Ark
+    as="button"
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    data-size={size}
+    data-active={isActive}
+    {asChild}
+    type="button"
+    class={classes}
+    {...propsFn ? propsFn() : {}}
+    {...rest}
+  >
+    {@render children?.()}
+  </Ark>
+{/snippet}
+
+{#if showTooltip}
+  <TooltipRoot openDelay={0} positioning={{ placement: 'right', gutter: 8 }}>
+    <TooltipTrigger asChild={button} />
+    <TooltipPositioner>
+      <TooltipContent
+        class={cn(sidebarStyles.tooltipContentClass, typeof tooltip === 'object' ? tooltip.class : undefined)}
+      >
+        {#if typeof tooltip === 'string'}
+          {tooltip}
+        {:else}
+          {@render tooltip?.children?.()}
+        {/if}
+      </TooltipContent>
+    </TooltipPositioner>
+  </TooltipRoot>
+{:else}
+  {@render button()}
+{/if}

package/dist/sidebar/MenuButton.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes, HTMLAttributes } from 'svelte/elements';
+type TooltipContentProps = {
+    class?: string;
+    children?: Snippet;
+};
+type Props = {
+    asChild?: Snippet<[(props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>]>;
+    isActive?: boolean;
+    variant?: 'default' | 'outline';
+    size?: 'default' | 'sm' | 'lg';
+    tooltip?: string | TooltipContentProps;
+    class?: string;
+    children?: Snippet;
+} & HTMLButtonAttributes;
+declare const MenuButton: import("svelte").Component<Props, {}, "">;
+type MenuButton = ReturnType<typeof MenuButton>;
+export default MenuButton;

package/dist/sidebar/MenuItem.svelte

@@ -0,0 +1,25 @@
+<!-- libs/helical-svelte/src/SidebarMenuItem.svelte -->
+<!-- Source: @ark-ui/svelte/factory (Ark UI), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLLIElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<Ark
+  as="li"
+  data-slot="sidebar-menu-item"
+  data-sidebar="menu-item"
+  class={cn(sidebarStyles.menuItemClass, className)}
+  {...rest}
+>
+  {@render children?.()}
+</Ark>

package/dist/sidebar/MenuItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLLIElement>;
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/sidebar/MenuLink.svelte

@@ -0,0 +1,66 @@
+<!-- libs/helical-svelte/src/sidebar/MenuLink.svelte -->
+<!-- Source: @cloudvoyant/helical-react sidebar shorthand (shadcn/ui sidebar, re-based on Ark UI) -->
+<!-- Renders a single menu item: <li> > <a|button>, with icon, label, active state,
+     and (in the collapsed icon-rail state) a tooltip. Composes SidebarMenuButton
+     for the button styles + tooltip behavior. -->
+<script lang="ts">
+  import { sidebarStyles, cn } from '@cloudvoyant/helical-ui';
+  import MenuButton from './MenuButton.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+  type MenuButtonProps = {
+    isActive?: boolean;
+    variant?: 'default' | 'outline';
+    size?: 'default' | 'sm' | 'lg';
+    tooltip?: string | { class?: string; children?: Snippet };
+    class?: string;
+  };
+
+  type Props = MenuButtonProps & {
+    icon?: Snippet;
+    href?: string;
+    onclick?: (event: MouseEvent) => void;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLLIElement>;
+
+  let {
+    icon,
+    href,
+    onclick,
+    isActive = false,
+    variant = 'default',
+    size = 'default',
+    tooltip,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+{#snippet content()}
+  {#if icon}
+    {@render icon()}
+  {/if}
+  {#if children}
+    <span>{@render children()}</span>
+  {/if}
+{/snippet}
+
+{#snippet anchor(propsFn: (props?: HTMLButtonAttributes) => HTMLAttributes<HTMLElement>)}
+  <a
+    href={href}
+    onclick={onclick}
+    {...propsFn()}
+  >
+    {@render content()}
+  </a>
+{/snippet}
+
+<li data-slot="sidebar-menu-item" data-sidebar="menu-item" class={cn(sidebarStyles.menuItemClass)} {...rest}>
+  {#if href != null}
+    <MenuButton asChild={anchor} {isActive} {variant} {size} {tooltip} class={className} />
+  {:else}
+    <MenuButton {onclick} {isActive} {variant} {size} {tooltip} class={className}>{@render content()}</MenuButton>
+  {/if}
+</li>

package/dist/sidebar/MenuLink.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type MenuButtonProps = {
+    isActive?: boolean;
+    variant?: 'default' | 'outline';
+    size?: 'default' | 'sm' | 'lg';
+    tooltip?: string | {
+        class?: string;
+        children?: Snippet;
+    };
+    class?: string;
+};
+type Props = MenuButtonProps & {
+    icon?: Snippet;
+    href?: string;
+    onclick?: (event: MouseEvent) => void;
+    children?: Snippet;
+} & HTMLAttributes<HTMLLIElement>;
+declare const MenuLink: import("svelte").Component<Props, {}, "">;
+type MenuLink = ReturnType<typeof MenuLink>;
+export default MenuLink;