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

package/dist/components/data-display/item/index.js

@@ -0,0 +1,11 @@
+export { default as Item } from './item.svelte';
+export { default as ItemActions } from './item-actions.svelte';
+export { default as ItemContent } from './item-content.svelte';
+export { default as ItemDescription } from './item-description.svelte';
+export { default as ItemFooter } from './item-footer.svelte';
+export { default as ItemGroup } from './item-group.svelte';
+export { default as ItemHeader } from './item-header.svelte';
+export { default as ItemMedia } from './item-media.svelte';
+export { default as ItemSeparator } from './item-separator.svelte';
+export { default as ItemTitle } from './item-title.svelte';
+export { itemMediaVariants, itemVariants, } from './item-variants.js';

package/dist/components/data-display/item/item-actions.svelte

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

package/dist/components/data-display/item/item-actions.svelte.d.ts

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

package/dist/components/data-display/item/item-content.svelte

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `item.tsx` (`ItemContent`), itself shadcn/ui new-york `item`
+  Svelte: shadcn-svelte `item`
+  Diverged: flex-none:`min-w-0` so a long title can truncate, carried over from the React package.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type ItemContentProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: ItemContentProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="item-content"
+  class={cn('flex min-w-0 flex-1 flex-col gap-1 [&+[data-slot=item-content]]', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/data-display/item/item-content.svelte.d.ts

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

package/dist/components/data-display/item/item-description.svelte

@@ -0,0 +1,39 @@
+<!--
+  Origin: the React package 2.23.0 `item.tsx` (`ItemDescription`), itself shadcn/ui new-york `item`
+  Svelte: shadcn-svelte `item`
+  Diverged: hover]:text-primary [&>a]:underline [&>a]:underline-offset-4:none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /** Clamped to two lines for a list; pass `line-clamp-none` where the block is the point (an address). */
+  export type ItemDescriptionProps = WithElementRef<
+    HTMLAttributes<HTMLParagraphElement>,
+    HTMLParagraphElement
+  >
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: ItemDescriptionProps = $props()
+</script>
+
+<p
+  bind:this={ref}
+  data-slot="item-description"
+  class={cn(
+    'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</p>

package/dist/components/data-display/item/item-description.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/** Clamped to two lines for a list; pass `line-clamp-none` where the block is the point (an address). */
+export type ItemDescriptionProps = WithElementRef<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
+declare const ItemDescription: import("svelte").Component<ItemDescriptionProps, {}, "ref">;
+type ItemDescription = ReturnType<typeof ItemDescription>;
+export default ItemDescription;

package/dist/components/data-display/item/item-footer.svelte

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

package/dist/components/data-display/item/item-footer.svelte.d.ts

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

package/dist/components/data-display/item/item-group.svelte

@@ -0,0 +1,34 @@
+<!--
+  Origin: the React package 2.23.0 `item.tsx` (`ItemGroup`), itself shadcn/ui new-york `item`
+  Svelte: shadcn-svelte `item`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * A list of `Item` rows. `flex flex-col` with no gap: rows that share a field
+   * touch, and a group of outlined rows takes `gap-2` so two borders do not
+   * meet as an accidental 2px rule.
+   */
+  export type ItemGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: ItemGroupProps = $props()
+</script>
+
+<!-- biome-ignore lint/a11y/useSemanticElements: upstream shadcn markup. The element is a styling wrapper carrying a role for grouping, not a landmark, and no semantic element covers it -->
+<div
+  bind:this={ref}
+  role="list"
+  data-slot="item-group"
+  class={cn('group/item-group flex flex-col', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/data-display/item/item-group.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * A list of `Item` rows. `flex flex-col` with no gap: rows that share a field
+ * touch, and a group of outlined rows takes `gap-2` so two borders do not
+ * meet as an accidental 2px rule.
+ */
+export type ItemGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const ItemGroup: import("svelte").Component<ItemGroupProps, {}, "ref">;
+type ItemGroup = ReturnType<typeof ItemGroup>;
+export default ItemGroup;

package/dist/components/data-display/item/item-header.svelte

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

package/dist/components/data-display/item/item-header.svelte.d.ts

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

package/dist/components/data-display/item/item-media.svelte

@@ -0,0 +1,63 @@
+<!--
+  Origin: the React package 2.23.0 `item.tsx` (`ItemMedia`), itself shadcn/ui new-york `item`
+  Svelte: shadcn-svelte `item`
+  Diverged: the icon media is `IconChip`'s chip (`rounded-lg` without a border,
+    rather than `rounded-sm` with one) and takes its `size`, `shape` and
+    `tone`, carried over from the React package.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { Size, Tone } from '../../../utils/tone.js'
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { IconChipShape } from '../icon-chip/icon-chip-variants.js'
+  import type { ItemMediaVariant } from './item-variants.js'
+
+  /**
+   * `variant="icon"` is `IconChip`'s chip, drawn on this element rather than
+   * nested inside it, so the slot's alignment (top-aligned beside a
+   * description) stays on the chip. Size it up to `md` for an entity standing
+   * alone under a card title; `sm` is tuned for a dense list.
+   */
+  export type ItemMediaProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: ItemMediaVariant
+    /** `variant="icon"` only: the chip's footprint, `sm` 32px, `md` 40px, `lg` 48px. */
+    size?: Size
+    /** `variant="icon"` only. `circle` where the row stands for a person. */
+    shape?: IconChipShape
+    /** `variant="icon"` only. Neutral unless the row is in a state worth a colour. */
+    tone?: Tone
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { iconChipClassName } from '../icon-chip/icon-chip-variants.js'
+  import { itemMediaVariants } from './item-variants.js'
+
+  let {
+    ref = $bindable(null),
+    variant = 'default',
+    size = 'sm',
+    shape = 'square',
+    tone = 'neutral',
+    class: className,
+    children,
+    ...rest
+  }: ItemMediaProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="item-media"
+  data-variant={variant}
+  data-tone={variant === 'icon' ? tone : undefined}
+  class={cn(
+    itemMediaVariants({ variant }),
+    variant === 'icon' && iconChipClassName({ size, shape, tone }),
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/data-display/item/item-media.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Size, Tone } from '../../../utils/tone.js';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { IconChipShape } from '../icon-chip/icon-chip-variants.js';
+import type { ItemMediaVariant } from './item-variants.js';
+/**
+ * `variant="icon"` is `IconChip`'s chip, drawn on this element rather than
+ * nested inside it, so the slot's alignment (top-aligned beside a
+ * description) stays on the chip. Size it up to `md` for an entity standing
+ * alone under a card title; `sm` is tuned for a dense list.
+ */
+export type ItemMediaProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: ItemMediaVariant;
+    /** `variant="icon"` only: the chip's footprint, `sm` 32px, `md` 40px, `lg` 48px. */
+    size?: Size;
+    /** `variant="icon"` only. `circle` where the row stands for a person. */
+    shape?: IconChipShape;
+    /** `variant="icon"` only. Neutral unless the row is in a state worth a colour. */
+    tone?: Tone;
+};
+declare const ItemMedia: import("svelte").Component<ItemMediaProps, {}, "ref">;
+type ItemMedia = ReturnType<typeof ItemMedia>;
+export default ItemMedia;

package/dist/components/data-display/item/item-separator.svelte

@@ -0,0 +1,25 @@
+<!--
+  Origin: the React package 2.23.0 `item.tsx` (`ItemSeparator`), itself shadcn/ui new-york `item`
+  Svelte: shadcn-svelte `item`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { SeparatorProps } from '../../layout/separator/separator.svelte'
+
+  export type ItemSeparatorProps = SeparatorProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Separator from '../../layout/separator/separator.svelte'
+
+  let { ref = $bindable(null), class: className, ...rest }: ItemSeparatorProps = $props()
+</script>
+
+<Separator
+  bind:ref
+  data-slot="item-separator"
+  orientation="horizontal"
+  class={cn('my-0', className)}
+  {...rest}
+/>

package/dist/components/data-display/item/item-separator.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { SeparatorProps } from '../../layout/separator/separator.svelte';
+export type ItemSeparatorProps = SeparatorProps;
+declare const ItemSeparator: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
+type ItemSeparator = ReturnType<typeof ItemSeparator>;
+export default ItemSeparator;

package/dist/components/data-display/item/item-title.svelte

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `item.tsx` (`ItemTitle`), itself shadcn/ui new-york `item`
+  Svelte: shadcn-svelte `item`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type ItemTitleProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: ItemTitleProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="item-title"
+  class={cn('flex w-fit max-w-full items-center gap-2 text-sm leading-snug font-medium', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/data-display/item/item-title.svelte.d.ts

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

package/dist/components/data-display/item/item-variants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Origin: the React package 2.23.0 `item.tsx` (`itemVariants`, `itemMediaVariants`)
+ * Diverged: split out of the component file, as badge-variants.ts is. Size
+ *   `default` is `md`, the vocabulary's name for the middle size; `sm` and
+ *   `flush` unchanged. Classes and the other values unchanged.
+ */
+import { type VariantProps } from 'class-variance-authority';
+export declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "sm" | "md" | "flush" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ItemVariant = NonNullable<VariantProps<typeof itemVariants>['variant']>;
+export type ItemSize = NonNullable<VariantProps<typeof itemVariants>['size']>;
+export declare const itemMediaVariants: (props?: ({
+    variant?: "default" | "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ItemMediaVariant = NonNullable<VariantProps<typeof itemMediaVariants>['variant']>;

package/dist/components/data-display/item/item-variants.js

@@ -0,0 +1,37 @@
+/**
+ * Origin: the React package 2.23.0 `item.tsx` (`itemVariants`, `itemMediaVariants`)
+ * Diverged: split out of the component file, as badge-variants.ts is. Size
+ *   `default` is `md`, the vocabulary's name for the middle size; `sm` and
+ *   `flush` unchanged. Classes and the other values unchanged.
+ */
+import { cva } from 'class-variance-authority';
+export const itemVariants = cva('group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-muted/50 [button]:hover:bg-muted/50 [button]:w-full [button]:cursor-pointer [button]:text-left duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border-border',
+            muted: 'bg-muted/50',
+        },
+        size: {
+            md: 'p-4 gap-4',
+            sm: 'py-3 px-4 gap-2.5',
+            flush: 'py-1.5 px-0 gap-2.5',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+    },
+});
+export const itemMediaVariants = cva('flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5', {
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            icon: '',
+            image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});

package/dist/components/data-display/item/item.svelte

@@ -0,0 +1,70 @@
+<!--
+  Origin: the React package 2.23.0 `item.tsx` (`Item`), itself shadcn/ui new-york `item`
+  Svelte: shadcn-svelte `item`
+  Diverged: the `flush` size (py-1.5 px-0), carried over from the React package, for
+    rows inside a card; size `default` is `md`. A row rendered as an `a` or
+    a `button` hovers on `--muted`, not `--accent`. React's `asChild` is
+    `href` (the row renders an `a`) or a `child` snippet that receives the
+    merged props, for a `button` row.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+  import type { ItemSize, ItemVariant } from './item-variants.js'
+
+  /**
+   * A **list row**, not a menu row. `DropdownMenuItem` is a command: it lives
+   * in a `role="menu"`, moves with the arrow keys and closes on select. This
+   * carries media, a title, a description and its own actions, and `ItemGroup`
+   * is a `role="list"`. A notification feed or a device list is this; a set of
+   * commands is the other.
+   *
+   * `sm` is what nearly every call site wants, because `md`'s `p-4 gap-4` is a
+   * card's padding on something that is a row inside one. `flush` drops the
+   * horizontal padding for a row whose container supplies it.
+   *
+   * A row you can click is a link or a button, never a `div` with an
+   * `onclick`: pass `href`, or render a `button` through `child`.
+   */
+  export type ItemProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    variant?: ItemVariant
+    size?: ItemSize
+    /** Renders the row as an `a` to this address. */
+    href?: string
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { itemVariants } from './item-variants.js'
+
+  let {
+    ref = $bindable(null),
+    variant = 'default',
+    size = 'md',
+    href,
+    child,
+    class: className,
+    children,
+    ...rest
+  }: ItemProps = $props()
+
+  const merged = $derived({
+    ...rest,
+    'data-slot': 'item',
+    'data-variant': variant,
+    'data-size': size,
+    class: cn(itemVariants({ variant, size }), className),
+  })
+</script>
+
+{#if child}
+  {@render child({ props: merged })}
+{:else if href}
+  <a bind:this={ref} {href} {...merged}>{@render children?.()}</a>
+{:else}
+  <div bind:this={ref} {...merged}>{@render children?.()}</div>
+{/if}

package/dist/components/data-display/item/item.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+import type { ItemSize, ItemVariant } from './item-variants.js';
+/**
+ * A **list row**, not a menu row. `DropdownMenuItem` is a command: it lives
+ * in a `role="menu"`, moves with the arrow keys and closes on select. This
+ * carries media, a title, a description and its own actions, and `ItemGroup`
+ * is a `role="list"`. A notification feed or a device list is this; a set of
+ * commands is the other.
+ *
+ * `sm` is what nearly every call site wants, because `md`'s `p-4 gap-4` is a
+ * card's padding on something that is a row inside one. `flush` drops the
+ * horizontal padding for a row whose container supplies it.
+ *
+ * A row you can click is a link or a button, never a `div` with an
+ * `onclick`: pass `href`, or render a `button` through `child`.
+ */
+export type ItemProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    variant?: ItemVariant;
+    size?: ItemSize;
+    /** Renders the row as an `a` to this address. */
+    href?: string;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const Item: import("svelte").Component<ItemProps, {}, "ref">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/components/data-display/metric-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MetricBar, type MetricBarProps } from './metric-bar.svelte';
+export { default as MetricRank, type MetricRankProps } from './metric-rank.svelte';

package/dist/components/data-display/metric-bar/index.js

@@ -0,0 +1,2 @@
+export { default as MetricBar } from './metric-bar.svelte';
+export { default as MetricRank } from './metric-rank.svelte';