@urbicon-ui/blocks 6.1.4

package/dist/components/CompositionBar/composition-bar.variants.d.ts

@@ -0,0 +1,192 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const compositionBarVariants: (props?: import("../../utils/variants").TVProps<{
+    orientation: {
+        horizontal: {
+            wrapper: string;
+            bar: string;
+            segment: string;
+            legend: string;
+            legendItem: string;
+        };
+        vertical: {
+            wrapper: string;
+            bar: string;
+            segment: string;
+            legend: string;
+        };
+    };
+    size: {
+        sm: {
+            bar: string;
+            legendItem: string;
+            legendDot: string;
+            tooltip: string;
+        };
+        md: {
+            bar: string;
+            legendItem: string;
+            legendDot: string;
+        };
+        lg: {
+            bar: string;
+            legendItem: string;
+            legendDot: string;
+        };
+    };
+    legendPlacement: {
+        top: {
+            wrapper: string;
+        };
+        right: {
+            wrapper: string;
+        };
+        bottom: {
+            wrapper: string;
+        };
+        left: {
+            wrapper: string;
+        };
+        none: {};
+    };
+    isHovered: {
+        true: {};
+        false: {};
+    };
+}> | undefined) => {
+    wrapper: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    barWrapper: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    bar: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    segment: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    segmentRest: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    tooltip: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    tooltipLabel: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    tooltipDetail: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    legend: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    legendItem: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    legendDot: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    legendLabel: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    legendValue: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    total: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    totalLabel: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        legendPlacement?: "top" | "right" | "bottom" | "left" | "none" | undefined;
+        isHovered?: boolean | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type CompositionBarVariants = VariantProps<typeof compositionBarVariants>;

package/dist/components/CompositionBar/composition-bar.variants.js

@@ -0,0 +1,137 @@
+import { tv } from '../../utils/variants';
+export const compositionBarVariants = tv({
+    slots: {
+        wrapper: ['flex w-full text-text-primary'],
+        barWrapper: ['flex w-full min-w-0 flex-col gap-2'],
+        // tier: modify — the bar is an interactive/data surface.
+        bar: [
+            'relative flex w-full overflow-hidden rounded-modify',
+            'border border-border-hairline bg-surface-subtle',
+            'transition-[box-shadow] duration-[var(--blocks-duration-fast)]'
+        ],
+        segment: [
+            'group relative flex items-center justify-center',
+            'min-w-0 cursor-default outline-none',
+            'transition-[opacity,filter] duration-[var(--blocks-duration-fast)]',
+            'focus-visible:z-10 focus-visible:outline-none',
+            'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base'
+        ],
+        segmentRest: [
+            'flex flex-1 items-center justify-center',
+            'bg-transparent text-text-tertiary text-xs',
+            'border-l border-dashed border-border-hairline'
+        ],
+        // tier: contain — floating tooltip surface.
+        tooltip: [
+            'pointer-events-none absolute z-[var(--z-tooltip)]',
+            'min-w-max rounded-contain px-2.5 py-1.5',
+            'bg-surface-elevated text-text-primary text-xs',
+            'shadow-[var(--blocks-shadow-md)] border border-border-hairline',
+            'opacity-0 transition-[opacity] duration-[var(--blocks-duration-fast)]',
+            'group-hover:opacity-100 group-focus-visible:opacity-100'
+        ],
+        tooltipLabel: ['font-medium'],
+        tooltipDetail: ['text-text-tertiary tabular-nums'],
+        legend: ['flex flex-wrap min-w-0'],
+        // tier: modify — legend rows are small focusable affordances.
+        legendItem: [
+            'group/item flex min-w-0 items-center gap-2 cursor-default',
+            'rounded-modify px-1 py-0.5 outline-none',
+            'transition-[opacity,background-color] duration-[var(--blocks-duration-fast)]',
+            'focus-visible:outline-none',
+            'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base'
+        ],
+        // tier: commit — legend status dot is a circle.
+        legendDot: ['inline-block h-2.5 w-2.5 rounded-commit shrink-0'],
+        legendLabel: ['text-text-secondary truncate'],
+        legendValue: ['text-text-tertiary tabular-nums shrink-0 ml-auto'],
+        total: ['inline-flex items-baseline gap-1.5', 'text-text-primary font-semibold tabular-nums'],
+        totalLabel: ['text-text-tertiary text-xs font-normal']
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                wrapper: 'flex-col gap-3',
+                bar: 'w-full flex-row',
+                segment: 'h-full',
+                legend: 'flex-row gap-x-4 gap-y-2',
+                legendItem: 'min-w-0 flex-shrink basis-auto'
+            },
+            vertical: {
+                wrapper: 'flex-row items-stretch gap-4',
+                bar: 'h-full min-h-[120px] w-12 flex-col-reverse',
+                segment: 'w-full',
+                legend: 'flex-col gap-1.5 flex-1 min-w-0'
+            }
+        },
+        size: {
+            sm: {
+                bar: 'h-2',
+                legendItem: 'text-xs',
+                legendDot: 'h-2 w-2',
+                tooltip: 'text-[11px]'
+            },
+            md: {
+                bar: 'h-3',
+                legendItem: 'text-sm',
+                legendDot: 'h-2.5 w-2.5'
+            },
+            lg: {
+                bar: 'h-5',
+                legendItem: 'text-base',
+                legendDot: 'h-3 w-3'
+            }
+        },
+        legendPlacement: {
+            top: { wrapper: 'flex-col-reverse' },
+            right: { wrapper: 'flex-row items-start gap-4' },
+            bottom: { wrapper: 'flex-col' },
+            left: { wrapper: 'flex-row-reverse items-start gap-4' },
+            none: {}
+        },
+        isHovered: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        // In horizontal orientation, legendPlacement="right"/"left" overrides the
+        // wrapper flex-direction (bar on the left/right, legend on the right/left).
+        {
+            orientation: 'horizontal',
+            legendPlacement: 'top',
+            class: { wrapper: 'flex-col-reverse' }
+        },
+        {
+            orientation: 'horizontal',
+            legendPlacement: 'bottom',
+            class: { wrapper: 'flex-col' }
+        },
+        {
+            orientation: 'horizontal',
+            legendPlacement: 'right',
+            class: { wrapper: 'flex-row items-center gap-4' }
+        },
+        {
+            orientation: 'horizontal',
+            legendPlacement: 'left',
+            class: { wrapper: 'flex-row-reverse items-center gap-4' }
+        },
+        // Vertical: top/bottom map to row-reverse / row (legend below/above)
+        {
+            orientation: 'vertical',
+            legendPlacement: 'top',
+            class: { wrapper: 'flex-col-reverse items-stretch' }
+        },
+        {
+            orientation: 'vertical',
+            legendPlacement: 'bottom',
+            class: { wrapper: 'flex-col items-stretch' }
+        }
+    ],
+    defaultVariants: {
+        orientation: 'horizontal',
+        size: 'md',
+        legendPlacement: 'bottom'
+    }
+});

package/dist/components/CompositionBar/index.d.ts

@@ -0,0 +1,122 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MintProp } from '../../mint';
+import type { CompositionBarVariants } from './composition-bar.variants';
+export type CompositionBarIntent = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+/** A single share in the stacked bar. */
+export interface CompositionItem {
+    /** Stable ID for highlight synchronization and snippet identity. */
+    id?: string | number;
+    /** Display label in the legend and the default tooltip. */
+    label: string;
+    /** Numeric value, defines the segment width. */
+    value: number;
+    /** Overrides the default intent from the component palette. */
+    intent?: CompositionBarIntent;
+    /** Raw color value (CSS color), bypasses the token system. Takes precedence over `intent`. */
+    color?: string;
+    /** Arbitrary metadata — passed through to snippets. */
+    meta?: Record<string, unknown>;
+}
+/**
+ * @description Stacked bar with legend that breaks an aggregate value down into
+ * its components. Suited for budget splits, pool composition, resource
+ * allocation, token vesting — anywhere `pool = a + b + c` should be visible
+ * at a glance.
+ *
+ * Small segments (< 2% of the total width) are kept minimally visible;
+ * hovering/focusing the bar or the legend highlights the counterpart in
+ * sync. Tooltip content is fully overridable via the `tooltip` snippet.
+ *
+ * @tag display
+ * @tag data
+ *
+ * @example
+ * ```svelte
+ * <CompositionBar
+ *   items={[
+ *     { label: 'Gas',         value: 220609, intent: 'primary' },
+ *     { label: 'Power',       value: 112731, intent: 'secondary' },
+ *     { label: 'Maintenance', value:  36102, intent: 'success' }
+ *   ]}
+ *   formatValue={(v) => formatCurrency(v)}
+ *   size="lg"
+ *   legendPlacement="right"
+ *   showTotal
+ * />
+ * ```
+ */
+export interface CompositionBarProps extends Omit<CompositionBarVariants, 'isHovered'>, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Composition shares in the order they should appear in the bar. */
+    items: CompositionItem[];
+    /**
+     * Optional fixed total value. Default: Σ items.value. If the explicit total
+     * exceeds the sum, the remaining area is rendered neutrally ("unaccounted
+     * share"). If it is below the sum, segments are scaled to 100% and a
+     * console warning is emitted.
+     */
+    total?: number;
+    /** Format function for values (tooltip, legend, total). */
+    formatValue?: (value: number) => string;
+    /**
+     * Format function for percentages. Default: 1 fraction digit, formatted with the active
+     * locale (e.g. `12.3 %`).
+     */
+    formatPercent?: (percent: number) => string;
+    /** Default intent for items without their own `intent`/`color`. @default 'primary' */
+    intent?: CompositionBarIntent;
+    /** Show the legend. @default true */
+    showLegend?: boolean;
+    /** Show percentages in legend and tooltip. @default true */
+    showPercentages?: boolean;
+    /** Render the total value after the legend. @default false */
+    showTotal?: boolean;
+    /**
+     * Render the value directly inside the bar segment (in addition to the
+     * legend). Narrow segments are skipped automatically to prevent overflow
+     * — only segments with sufficient width (≥ 8% or ~40 px) show their
+     * value. Useful for print, PDF attachments, or dense dashboards where
+     * hover tooltips are not enough.
+     * @default false
+     */
+    showValues?: boolean;
+    /**
+     * Label rendered before the total. Defaults to the localized "Total" label from the blocks
+     * i18n bundle.
+     */
+    totalLabel?: string;
+    /**
+     * Minimum segment width in percent. Values below it are raised to this
+     * width so they stay visible in the bar (nothing gets swallowed). Larger
+     * segments are shrunk proportionally so the sum still adds up to 100%.
+     * @default 1.5
+     */
+    minSegmentPercent?: number;
+    /**
+     * Selection callback fired when a bar segment or legend entry is clicked.
+     * Receives the item and its index. Makes the bar interactive (cursor +
+     * click handler).
+     */
+    onItemSelect?: (item: CompositionItem, index: number) => void;
+    /** Micro-interaction preset. @default 'none' */
+    mint?: MintProp;
+    /** Extra classes merged onto the wrapper. */
+    class?: string;
+    /** Remove all default classes; only the layout structure remains. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. */
+    slotClasses?: Partial<Record<'wrapper' | 'barWrapper' | 'bar' | 'segment' | 'segmentRest' | 'tooltip' | 'tooltipLabel' | 'tooltipDetail' | 'legend' | 'legendItem' | 'legendDot' | 'legendLabel' | 'legendValue' | 'total' | 'totalLabel', string>>;
+    /** Preset name (registered via `<BlocksProvider presets={{ CompositionBar: {...} }}>`). */
+    preset?: string;
+    /**
+     * Custom rendering of a legend entry. Receives the item and its percentage.
+     * Fully replaces the default rendering (dot + label + value/percent).
+     */
+    legendItem?: Snippet<[item: CompositionItem, percent: number]>;
+    /**
+     * Custom tooltip content. Replaces the default layout (label, value, percent).
+     */
+    tooltip?: Snippet<[item: CompositionItem, percent: number]>;
+}
+export { default as CompositionBar } from './CompositionBar.svelte';
+export { type CompositionBarVariants, compositionBarVariants } from './composition-bar.variants';

package/dist/components/CompositionBar/index.js

@@ -0,0 +1,2 @@
+export { default as CompositionBar } from './CompositionBar.svelte';
+export { compositionBarVariants } from './composition-bar.variants';

package/dist/components/CurrencyInput/CurrencyInput.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { Input } from '../../primitives/Input';
+  import type { CurrencyInputProps } from './index';
+
+  let {
+    value = $bindable(null),
+    locale = 'de-DE',
+    currency = 'EUR',
+    symbolPosition = 'suffix',
+    precision = 2,
+    name,
+    onValueChange,
+    leftIcon: userLeftIcon,
+    rightIcon: userRightIcon,
+    ...inputProps
+  }: CurrencyInputProps = $props();
+
+  const resolvedLocale = $derived(
+    locale === 'auto' ? new Intl.NumberFormat().resolvedOptions().locale : locale
+  );
+
+  const decimalSeparator = $derived(
+    new Intl.NumberFormat(resolvedLocale).formatToParts(1.1).find((p) => p.type === 'decimal')
+      ?.value ?? '.'
+  );
+
+  const symbol = $derived.by(() => {
+    if (symbolPosition === 'none') return '';
+    const parts = new Intl.NumberFormat(resolvedLocale, {
+      style: 'currency',
+      currency
+    }).formatToParts(0);
+    return parts.find((p) => p.type === 'currency')?.value ?? currency;
+  });
+
+  function escapeForCharClass(s: string): string {
+    return s.replace(/[\\\]^-]/g, '\\$&');
+  }
+
+  function formatDisplay(cents: number | null | undefined, raw: boolean): string {
+    if (cents === null || cents === undefined || Number.isNaN(cents)) return '';
+    const factor = Math.pow(10, Math.max(0, precision));
+    const negative = cents < 0;
+    const absCents = Math.abs(cents);
+    const intMajor = Math.trunc(absCents / factor);
+    const intStr = raw
+      ? intMajor.toString()
+      : intMajor.toLocaleString(resolvedLocale, { useGrouping: true, maximumFractionDigits: 0 });
+    const result =
+      precision > 0
+        ? intStr + decimalSeparator + (absCents % factor).toString().padStart(precision, '0')
+        : intStr;
+    return negative ? '-' + result : result;
+  }
+
+  function parseInput(raw: string): number | null {
+    const trimmed = raw.trim();
+    if (!trimmed) return null;
+    const negative = trimmed.startsWith('-');
+    const sepIdx = trimmed.indexOf(decimalSeparator);
+    const intStr =
+      sepIdx === -1 ? trimmed.replace(/\D/g, '') : trimmed.slice(0, sepIdx).replace(/\D/g, '');
+    const rawFrac = sepIdx === -1 ? '' : trimmed.slice(sepIdx + 1).replace(/\D/g, '');
+    if (intStr === '' && rawFrac === '') return null;
+    const fracStr = precision > 0 ? rawFrac.padEnd(precision, '0').slice(0, precision) : '';
+    const parsed = Number.parseInt((intStr || '0') + fracStr, 10);
+    if (Number.isNaN(parsed)) return null;
+    return negative ? -parsed : parsed;
+  }
+
+  let displayValue = $derived(formatDisplay(value, false));
+
+  // Count digits + minus sign to the left of `cursor` in `text`. The minus is
+  // counted so it does not shift the cursor when the user toggles negativity.
+  function countSignificantChars(text: string, cursor: number): number {
+    let count = 0;
+    for (let i = 0; i < cursor && i < text.length; i++) {
+      const ch = text[i];
+      if ((ch >= '0' && ch <= '9') || ch === '-') count++;
+    }
+    return count;
+  }
+
+  // Find the offset in `formatted` after the Nth significant char (digit or `-`).
+  function findCursorForSignificantCount(formatted: string, n: number): number {
+    if (n <= 0) return 0;
+    let count = 0;
+    for (let i = 0; i < formatted.length; i++) {
+      const ch = formatted[i];
+      if ((ch >= '0' && ch <= '9') || ch === '-') {
+        count++;
+        if (count === n) return i + 1;
+      }
+    }
+    return formatted.length;
+  }
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const rawCursor = target.selectionStart ?? target.value.length;
+    const significantBeforeCursor = countSignificantChars(target.value, rawCursor);
+
+    const sepClass = precision > 0 ? escapeForCharClass(decimalSeparator) : '';
+    const allowed = `0-9\\-${sepClass}`;
+    let sanitized = target.value
+      .replace(new RegExp(`[^${allowed}]`, 'g'), '')
+      .replace(/(?<!^)-/g, '');
+
+    if (precision > 0) {
+      const firstSep = sanitized.indexOf(decimalSeparator);
+      if (firstSep !== -1) {
+        const before = sanitized.slice(0, firstSep + 1);
+        const after = sanitized
+          .slice(firstSep + 1)
+          .split(decimalSeparator)
+          .join('');
+        sanitized = before + after.slice(0, precision);
+      }
+    }
+
+    const parsed = parseInput(sanitized);
+    if (parsed !== value) {
+      value = parsed;
+      onValueChange?.(parsed);
+    }
+
+    // Re-format with grouping so thousands separators stay visible while
+    // typing. Preserve a lone leading minus so the user can compose negatives
+    // by typing `-` first — `parseInput` returns null for that intermediate
+    // state, and `formatDisplay(null)` would otherwise wipe the buffer.
+    const formatted = parsed === null && sanitized === '-' ? '-' : formatDisplay(parsed, false);
+    displayValue = formatted;
+    target.value = formatted;
+
+    // Cursor restoration is relative to the digit count so the browser-driven
+    // caret stays anchored after grouping separators shift positions.
+    const newCursor = findCursorForSignificantCount(formatted, significantBeforeCursor);
+    requestAnimationFrame(() => {
+      try {
+        target.setSelectionRange(newCursor, newCursor);
+      } catch {
+        // Some browsers throw when the input is no longer focused.
+      }
+    });
+  }
+</script>
+
+{#snippet currencySymbolSlot()}
+  <span class="text-text-tertiary px-1 text-sm select-none" aria-hidden="true">{symbol}</span>
+{/snippet}
+
+<Input
+  {...inputProps}
+  type="text"
+  inputmode="decimal"
+  value={displayValue}
+  oninput={handleInput}
+  leftIcon={symbolPosition === 'prefix' && symbol ? currencySymbolSlot : userLeftIcon}
+  rightIcon={symbolPosition === 'suffix' && symbol ? currencySymbolSlot : userRightIcon}
+/>
+
+{#if name}
+  <input type="hidden" {name} value={value ?? ''} />
+{/if}

package/dist/components/CurrencyInput/CurrencyInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CurrencyInputProps } from './index';
+declare const CurrencyInput: import("svelte").Component<CurrencyInputProps, {}, "value">;
+type CurrencyInput = ReturnType<typeof CurrencyInput>;
+export default CurrencyInput;