@urbicon-ui/blocks 6.1.4

package/dist/primitives/Badge/badge.variants.d.ts

@@ -0,0 +1,154 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const PLACEMENT_VALUES: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"];
+export declare const badgeVariants: (props?: import("../../utils/variants").TVProps<{
+    tier: {
+        commit: {
+            base: string;
+        };
+        modify: {
+            base: string;
+        };
+    };
+    intent: {
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+        neutral: {};
+    };
+    variant: {
+        filled: {};
+        outlined: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        dot: {
+            base: string;
+            content: string;
+        };
+    };
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    placement: {
+        top: string;
+        'top-start': string;
+        'top-end': string;
+        bottom: string;
+        'bottom-start': string;
+        'bottom-end': string;
+        left: string;
+        right: string;
+    };
+    counter: {
+        true: {
+            base: string;
+        };
+    };
+    pulse: {
+        true: {
+            base: string;
+        };
+    };
+    removable: {
+        true: {
+            base: string;
+        };
+    };
+    interactive: {
+        true: {
+            base: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    border: {
+        true: {
+            base: string;
+        };
+    };
+}> | undefined) => {
+    base: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        variant?: "dot" | "filled" | "outlined" | "soft" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+        counter?: boolean | undefined;
+        pulse?: boolean | undefined;
+        removable?: boolean | undefined;
+        interactive?: boolean | undefined;
+        disabled?: boolean | undefined;
+        border?: 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;
+    content: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        variant?: "dot" | "filled" | "outlined" | "soft" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+        counter?: boolean | undefined;
+        pulse?: boolean | undefined;
+        removable?: boolean | undefined;
+        interactive?: boolean | undefined;
+        disabled?: boolean | undefined;
+        border?: 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;
+    removeButton: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        variant?: "dot" | "filled" | "outlined" | "soft" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+        counter?: boolean | undefined;
+        pulse?: boolean | undefined;
+        removable?: boolean | undefined;
+        interactive?: boolean | undefined;
+        disabled?: boolean | undefined;
+        border?: 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;
+    removeIcon: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        variant?: "dot" | "filled" | "outlined" | "soft" | undefined;
+        size?: "sm" | "md" | "lg" | "xs" | undefined;
+        placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+        counter?: boolean | undefined;
+        pulse?: boolean | undefined;
+        removable?: boolean | undefined;
+        interactive?: boolean | undefined;
+        disabled?: boolean | undefined;
+        border?: 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 BadgeVariants = VariantProps<typeof badgeVariants>;
+export type BadgePlacement = (typeof PLACEMENT_VALUES)[number];

package/dist/primitives/Badge/badge.variants.js

@@ -0,0 +1,423 @@
+import { tv } from '../../utils/variants';
+export const PLACEMENT_VALUES = [
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'right'
+];
+const PLACEMENT_ARRAY = [...PLACEMENT_VALUES];
+export const badgeVariants = tv({
+    slots: {
+        base: [
+            'relative inline-flex items-center justify-center',
+            'font-medium text-center whitespace-nowrap border select-none',
+            'transition-[color,background-color,border-color,box-shadow,opacity] duration-[var(--blocks-duration-fast)] ease-out'
+            // Radius driven by `tier` axis below.
+        ],
+        content: ['flex items-center gap-inherit'],
+        // tier: modify — small remove-control on a commit-tier badge.
+        removeButton: [
+            'ml-1 shrink-0 rounded-modify transition-colors text-current',
+            'hover:bg-neutral-950/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current'
+        ],
+        removeIcon: ['w-3 h-3']
+    },
+    variants: {
+        // 3-tier semantic radius. Default `commit` (pill) — badges declare
+        // identity / status. Opt-in `modify` (soft) is rare but useful when a
+        // badge sits inside a modify-tier context (compact toolbar, inline tag
+        // strip) and a pill would feel oversized. Usually inherited from a
+        // wrapping <Toolbar tier="modify"> via TierContext.
+        tier: {
+            commit: { base: 'rounded-commit' },
+            modify: { base: 'rounded-modify' }
+        },
+        intent: {
+            primary: {},
+            secondary: {},
+            success: {},
+            warning: {},
+            danger: {},
+            neutral: {}
+        },
+        variant: {
+            filled: {},
+            outlined: {
+                base: 'bg-transparent border-2'
+            },
+            soft: {
+                base: 'bg-transparent border-transparent'
+            },
+            dot: {
+                base: '!p-0 rounded-commit border-none',
+                content: 'sr-only'
+            }
+        },
+        size: {
+            xs: {
+                base: 'h-4 px-1.5 text-xs gap-1'
+            },
+            sm: {
+                base: 'h-5 px-2 text-xs gap-1'
+            },
+            md: {
+                base: 'h-6 px-2.5 text-sm gap-1.5'
+            },
+            lg: {
+                base: 'h-7 px-3 text-sm gap-2'
+            }
+        },
+        placement: {
+            top: 'top-0 left-1/2 -translate-x-1/2 -translate-y-1/2',
+            'top-start': 'top-0 left-0 -translate-x-1/2 -translate-y-1/2',
+            'top-end': 'top-0 right-0 translate-x-1/2 -translate-y-1/2',
+            bottom: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2',
+            'bottom-start': 'bottom-0 left-0 -translate-x-1/2 translate-y-1/2',
+            'bottom-end': 'bottom-0 right-0 translate-x-1/2 translate-y-1/2',
+            left: 'left-0 top-1/2 -translate-x-1/2 -translate-y-1/2',
+            right: 'right-0 top-1/2 translate-x-1/2 -translate-y-1/2'
+        },
+        counter: {
+            true: {
+                base: 'justify-center tabular-nums'
+            }
+        },
+        pulse: {
+            true: {
+                // Custom ring-pulse animation that doesn't drop opacity like
+                // Tailwind's default `animate-pulse`. An opacity-based pulse drops
+                // the text/bg contrast below WCAG AA at mid-animation; the ring
+                // alternative keeps the solid fill static so the label stays
+                // readable.
+                base: 'animate-[badge-pulse_2s_cubic-bezier(0.4,0,0.6,1)_infinite]'
+            }
+        },
+        removable: {
+            true: {
+                base: 'pr-2'
+            }
+        },
+        interactive: {
+            true: {
+                base: 'cursor-pointer hover:scale-105 active:scale-95'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed pointer-events-none'
+            }
+        },
+        border: {
+            true: {
+                base: 'ring-2 ring-surface-base'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            placement: PLACEMENT_ARRAY,
+            class: {
+                base: 'absolute z-10'
+            }
+        },
+        // Counter: min-width matches height per size for circular single-digit look
+        { counter: true, size: 'xs', class: { base: 'min-w-4 px-1' } },
+        { counter: true, size: 'sm', class: { base: 'min-w-5 px-1.5' } },
+        { counter: true, size: 'md', class: { base: 'min-w-6 px-1.5' } },
+        { counter: true, size: 'lg', class: { base: 'min-w-7 px-2' } },
+        // Dot size overrides
+        {
+            variant: 'dot',
+            size: 'xs',
+            class: { base: '!w-1.5 !h-1.5' }
+        },
+        {
+            variant: 'dot',
+            size: 'sm',
+            class: { base: '!w-2 !h-2' }
+        },
+        {
+            variant: 'dot',
+            size: 'md',
+            class: { base: '!w-2.5 !h-2.5' }
+        },
+        {
+            variant: 'dot',
+            size: 'lg',
+            class: { base: '!w-3 !h-3' }
+        },
+        {
+            intent: 'primary',
+            variant: 'outlined',
+            class: {
+                base: 'text-primary border-primary'
+            }
+        },
+        {
+            intent: 'secondary',
+            variant: 'outlined',
+            class: {
+                base: 'text-secondary border-secondary'
+            }
+        },
+        {
+            intent: 'success',
+            variant: 'outlined',
+            class: {
+                base: 'text-success border-success'
+            }
+        },
+        {
+            intent: 'warning',
+            variant: 'outlined',
+            class: {
+                base: 'text-warning-emphasis border-warning'
+            }
+        },
+        {
+            intent: 'danger',
+            variant: 'outlined',
+            class: {
+                base: 'text-danger border-danger'
+            }
+        },
+        {
+            intent: 'neutral',
+            variant: 'outlined',
+            class: {
+                base: 'text-neutral border-neutral'
+            }
+        },
+        // Interactions for outlined variant (only when interactive)
+        {
+            interactive: true,
+            variant: 'outlined',
+            intent: 'primary',
+            class: { base: 'hover:bg-primary-subtle' }
+        },
+        {
+            interactive: true,
+            variant: 'outlined',
+            intent: 'secondary',
+            class: { base: 'hover:bg-secondary-subtle' }
+        },
+        {
+            interactive: true,
+            variant: 'outlined',
+            intent: 'success',
+            class: { base: 'hover:bg-success-subtle' }
+        },
+        {
+            interactive: true,
+            variant: 'outlined',
+            intent: 'warning',
+            class: { base: 'hover:bg-warning-subtle' }
+        },
+        {
+            interactive: true,
+            variant: 'outlined',
+            intent: 'danger',
+            class: { base: 'hover:bg-danger-subtle' }
+        },
+        {
+            interactive: true,
+            variant: 'outlined',
+            intent: 'neutral',
+            class: { base: 'hover:bg-neutral-subtle' }
+        },
+        // Soft variants for each intent
+        {
+            intent: 'primary',
+            variant: 'soft',
+            class: {
+                base: 'text-primary-emphasis bg-primary-subtle'
+            }
+        },
+        {
+            intent: 'secondary',
+            variant: 'soft',
+            class: {
+                base: 'text-secondary-emphasis bg-secondary-subtle'
+            }
+        },
+        {
+            intent: 'success',
+            variant: 'soft',
+            class: {
+                base: 'text-success-emphasis bg-success-subtle'
+            }
+        },
+        {
+            intent: 'warning',
+            variant: 'soft',
+            class: {
+                base: 'text-warning-emphasis bg-warning-subtle'
+            }
+        },
+        {
+            intent: 'danger',
+            variant: 'soft',
+            class: {
+                base: 'text-danger-emphasis bg-danger-subtle'
+            }
+        },
+        {
+            intent: 'neutral',
+            variant: 'soft',
+            class: {
+                base: 'text-neutral-emphasis bg-neutral-subtle'
+            }
+        },
+        // Filled variants per intent
+        {
+            intent: 'primary',
+            variant: 'filled',
+            class: {
+                base: 'bg-primary text-text-on-primary border-primary'
+            }
+        },
+        {
+            intent: 'secondary',
+            variant: 'filled',
+            class: {
+                base: 'bg-secondary text-text-on-primary border-secondary'
+            }
+        },
+        {
+            intent: 'success',
+            variant: 'filled',
+            class: {
+                base: 'bg-success text-text-on-primary border-success'
+            }
+        },
+        {
+            intent: 'warning',
+            variant: 'filled',
+            class: {
+                base: 'bg-warning text-text-on-surface border-warning'
+            }
+        },
+        {
+            intent: 'danger',
+            variant: 'filled',
+            class: {
+                base: 'bg-danger text-text-on-primary border-danger'
+            }
+        },
+        {
+            intent: 'neutral',
+            variant: 'filled',
+            class: {
+                base: 'bg-neutral text-text-on-primary border-neutral'
+            }
+        },
+        // Dot color per intent
+        {
+            intent: 'primary',
+            variant: 'dot',
+            class: {
+                base: 'bg-primary'
+            }
+        },
+        {
+            intent: 'secondary',
+            variant: 'dot',
+            class: {
+                base: 'bg-secondary'
+            }
+        },
+        {
+            intent: 'success',
+            variant: 'dot',
+            class: {
+                base: 'bg-success'
+            }
+        },
+        {
+            intent: 'warning',
+            variant: 'dot',
+            class: {
+                base: 'bg-warning'
+            }
+        },
+        {
+            intent: 'danger',
+            variant: 'dot',
+            class: {
+                base: 'bg-danger'
+            }
+        },
+        {
+            intent: 'neutral',
+            variant: 'dot',
+            class: {
+                base: 'bg-neutral'
+            }
+        },
+        // Interactive hover effects for the filled variant
+        {
+            interactive: true,
+            variant: 'filled',
+            intent: 'primary',
+            class: {
+                base: 'hover:bg-primary-hover active:bg-primary-active'
+            }
+        },
+        {
+            interactive: true,
+            variant: 'filled',
+            intent: 'secondary',
+            class: {
+                base: 'hover:bg-secondary-hover active:bg-secondary-active'
+            }
+        },
+        {
+            interactive: true,
+            variant: 'filled',
+            intent: 'success',
+            class: {
+                base: 'hover:bg-success-hover active:bg-success-active'
+            }
+        },
+        {
+            interactive: true,
+            variant: 'filled',
+            intent: 'warning',
+            class: {
+                base: 'hover:bg-warning-hover active:bg-warning-active'
+            }
+        },
+        {
+            interactive: true,
+            variant: 'filled',
+            intent: 'danger',
+            class: {
+                base: 'hover:bg-danger-hover active:bg-danger-active'
+            }
+        },
+        {
+            interactive: true,
+            variant: 'filled',
+            intent: 'neutral',
+            class: {
+                base: 'hover:bg-neutral-hover active:bg-neutral-active'
+            }
+        }
+    ],
+    defaultVariants: {
+        tier: 'commit',
+        intent: 'primary',
+        variant: 'filled',
+        size: 'md',
+        counter: false,
+        pulse: false,
+        removable: false,
+        interactive: false,
+        disabled: false,
+        border: false
+    }
+});

package/dist/primitives/Badge/index.d.ts

@@ -0,0 +1,99 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MintProp } from '../../mint';
+import type { BadgePlacement, BadgeVariants } from './badge.variants';
+/**
+ * Shared fields that apply to every Badge variant — `dot` and the
+ * label-style variants both accept these.
+ */
+interface BadgeBaseProps extends Omit<BadgeVariants, 'variant'>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Add a pulsing animation to draw attention (e.g. for live indicators). */
+    pulse?: boolean;
+    /** Visually disable the badge (reduced opacity, no pointer events). */
+    disabled?: boolean;
+    /** Add a ring outline in the page background color — useful to visually separate overlapping or positioned badges from their parent. */
+    border?: boolean;
+    /** Anchor the badge absolutely within a `position: relative` parent. */
+    placement?: BadgePlacement;
+    /** Click handler. Automatically enables interactive styles. */
+    onclick?: (event: MouseEvent) => void;
+    /** Called when the hover state changes. */
+    onHover?: (hovered: boolean) => void;
+    /** Extra classes merged onto the root element. */
+    class?: string;
+    /** Remove all default tv classes. */
+    unstyled?: boolean;
+    /** Per-slot class overrides merged with tv styles. */
+    slotClasses?: Partial<Record<'base' | 'content' | 'removeButton' | 'removeIcon', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Badge: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+    /** ARIA role. Defaults to `"status"`. Use `"alert"` for time-sensitive notifications. */
+    role?: 'status' | 'alert' | 'badge';
+    /** Micro-interaction preset. Only applies when the badge is interactive. */
+    mint?: MintProp;
+}
+/**
+ * Dot-style badge — a pure indicator. Content is `sr-only` (visually
+ * hidden), so `children` / `counter` / `removable` / `interactive` /
+ * `onRemove` are excluded by the type: an invisible remove-button or
+ * hover-scale on a 2.5 × 2.5 px dot is never the intended UI.
+ */
+interface BadgeDotProps extends BadgeBaseProps {
+    /** Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. */
+    variant: 'dot';
+    children?: never;
+    counter?: never;
+    removable?: never;
+    interactive?: never;
+    onRemove?: never;
+}
+/**
+ * Label-style badge — accepts content, counter shape, remove button, etc.
+ */
+interface BadgeStandardProps extends BadgeBaseProps {
+    /** Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. @default 'filled' */
+    variant?: 'filled' | 'outlined' | 'soft';
+    /** Badge content (text, icons, numbers). */
+    children?: Snippet;
+    /** Display as a compact pill for numeric counts. Tightens padding and uses tabular-nums so digits align. */
+    counter?: boolean;
+    /** Show a remove (×) button. */
+    removable?: boolean;
+    /** Enable hover/focus styles and keyboard activation. Automatically enabled when `onclick` is provided. */
+    interactive?: boolean;
+    /** Fired when the remove button is clicked (only when `removable` is true). */
+    onRemove?: () => void;
+}
+/**
+ * @description Compact label for status, categories, counters, and notifications.
+ *
+ * @tag feedback
+ * @related Alert
+ * @related Toast
+ *
+ * Badge props are a discriminated union on `variant`: `variant="dot"`
+ * forbids `children` / `counter` / `removable` / `interactive` /
+ * `onRemove` at the type level, while `filled` / `outlined` / `soft`
+ * accept the full surface.
+ *
+ * @example
+ * ```svelte
+ * <Badge variant="filled" intent="primary">New Feature</Badge>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <div class="relative">
+ *   <Button>Notifications</Button>
+ *   <Badge intent="danger" counter placement="top-end" border>5</Badge>
+ * </div>
+ * ```
+ */
+export type BadgeProps = BadgeDotProps | BadgeStandardProps;
+export { default as Badge } from './Badge.svelte';
+export { type BadgePlacement, type BadgeVariants, badgeVariants, PLACEMENT_VALUES } from './badge.variants';

package/dist/primitives/Badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.svelte';
+export { badgeVariants, PLACEMENT_VALUES } from './badge.variants';