@heyramzi/ui 2.23.0 → 3.0.0

package/src/components/locale-switch/locale-switch.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import { SegmentedFilter, type TabDef } from "../segmented/index.js";
-
-	// =========================
-	// TYPES
-	// =========================
-	type LocaleOption = {
-		value: string;
-		label: string;
-		flag: string;
-	};
-
-	interface Props {
-		// Wraps `SegmentedFilter` so it shares one track with every other strip. It
-		// only adds each language's flag.
-		value: string;
-		onchange: (value: string) => void;
-		options?: LocaleOption[];
-		/** Names the control for a screen reader. Without it the group is two bare letters. */
-		ariaLabel?: string;
-		class?: string;
-	}
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		value,
-		onchange,
-		options = [
-			{ value: "en", label: "EN", flag: "/flags/US.svg" },
-			{ value: "fr", label: "FR", flag: "/flags/FR.svg" },
-		],
-		ariaLabel = "Language",
-		class: className,
-	}: Props = $props();
-
-	// =========================
-	// DERIVED
-	// =========================
-	let segments = $derived<TabDef<string>[]>(
-		options.map((option) => ({ value: option.value, label: option.label, image: option.flag })),
-	);
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<SegmentedFilter
-	{value}
-	onValueChange={onchange}
-	options={segments}
-	block={false}
-	{ariaLabel}
-	class={className}
-/>

package/src/components/work-parts/count-chip.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn } from "../../lib/utils.js";
-
-	interface Props {
-		count: number;
-		class?: string;
-	}
-
-	let { count, class: className }: Props = $props();
-</script>
-
-<!-- A count beside a heading: a quiet square, never a pill, so it reads as a number and not a status. -->
-<span
-	class={cn(
-		"grid h-5 min-w-5 shrink-0 place-items-center rounded-sm bg-foreground/5 px-1 text-xs font-medium text-muted-foreground tabular-nums",
-		className,
-	)}
->
-	{count.toLocaleString()}
-</span>

package/src/design/index.css

@@ -1,215 +0,0 @@
-/* The craft layer, imported once after Tailwind: elevation, radius and motion
- * stay the same in every app, and an app tints it with `--elev-tint` alone.
- */
-
-@import "./polish.css";
-
-/* ── Radius, by role not by size ─────────────────────────────
-   Nested boxes need radii that step, so the Tailwind names map to roles and
-   `rounded-lg` is already the control radius. */
-@theme {
-  --radius-xs: 4px; /* tag, dot, inline code */
-  --radius-sm: 6px; /* chip, badge, small pill */
-  --radius-md: 7px; /* between a chip and a control */
-  --radius-lg: 8px; /* control: button, input, select, menu item */
-  --radius-xl: 10px; /* card, panel, stage */
-  --radius-2xl: 14px; /* overlay: dialog, sheet, command palette */
-  --radius-3xl: 20px; /* hero surface, full-bleed panel */
-}
-
-/* ── Elevation ───────────────────────────────────────────────
-   The steps are shadow-only and the hairline is its own token, or a box that
-   already draws a border gets two edges a pixel apart. */
-:root {
-  --elev-tint: oklch(0 0 0);
-
-  /* Resting on the page. A button, a chip, a row. */
-  --elev-btn:
-    0 1px 1px -0.5px color-mix(in oklab, var(--elev-tint) 7%, transparent),
-    0 2px 5px -2px color-mix(in oklab, var(--elev-tint) 6%, transparent);
-
-  /* Sitting on the page. A card, a stage, a panel. */
-  --elev-card:
-    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 7%, transparent),
-    0 4px 9px -3px color-mix(in oklab, var(--elev-tint) 6%, transparent),
-    0 14px 28px -10px color-mix(in oklab, var(--elev-tint) 7%, transparent);
-
-  /* Lifted off the page. A hovered card, a popover, a menu. */
-  --elev-raised:
-    0 1px 2px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
-    0 6px 13px -4px color-mix(in oklab, var(--elev-tint) 9%, transparent),
-    0 20px 40px -12px color-mix(in oklab, var(--elev-tint) 12%, transparent);
-
-  /* Floating over a dimmed page. A dialog, a sheet, a command palette. */
-  --elev-overlay:
-    0 2px 4px -1px color-mix(in oklab, var(--elev-tint) 8%, transparent),
-    0 12px 26px -8px color-mix(in oklab, var(--elev-tint) 12%, transparent),
-    0 40px 72px -20px color-mix(in oklab, var(--elev-tint) 20%, transparent);
-
-  /* A hairline separates a surface from what's behind it; a rim lights its top
-     edge so a filled control reads as a key, not a coloured box. */
-  --elev-hairline: 0 0 0 1px var(--color-border, var(--border));
-  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 16%, transparent);
-
-  /* A field is the one box that goes in rather than up. */
-  --elev-field: inset 0 1px 2px color-mix(in oklab, var(--elev-tint) 7%, transparent);
-}
-
-/* A dark surface can't cast a shadow darker than its page, so on dark a
-   low-alpha white hairline does the separating. */
-.dark {
-  --elev-btn: 0 1px 2px color-mix(in oklab, black 30%, transparent);
-  --elev-card:
-    0 1px 2px color-mix(in oklab, black 24%, transparent),
-    0 4px 12px -4px color-mix(in oklab, black 30%, transparent);
-  --elev-raised:
-    0 2px 6px color-mix(in oklab, black 30%, transparent),
-    0 10px 24px -6px color-mix(in oklab, black 38%, transparent);
-  --elev-overlay:
-    0 4px 10px color-mix(in oklab, black 34%, transparent),
-    0 24px 56px -12px color-mix(in oklab, black 50%, transparent);
-
-  --elev-hairline: 0 0 0 1px color-mix(in oklab, white 10%, transparent);
-  --elev-rim: inset 0 1px 0 color-mix(in oklab, white 10%, transparent);
-  --elev-field: inset 0 1px 2px color-mix(in oklab, black 40%, transparent);
-}
-
-/* ── Focus ───────────────────────────────────────────────────
-   One ring in one variable, a solid accent edge plus a soft halo, so every
-   control focuses the same way. */
-:root {
-  --ring-color: var(--color-ring, var(--ring));
-  --ring-halo: color-mix(in oklab, var(--ring-color) 16%, transparent);
-  /* At a higher alpha the halo reads as a second border, not a glow, which is
-     why it's 16% over 4px and not 30% over 2px. */
-  --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 5px var(--ring-halo);
-}
-
-/* ── Motion ──────────────────────────────────────────────────
-   The transitions-dev scale, verbatim so pasted snippets share its names; every
-   close is shorter than its open, and no close bounces. */
-:root {
-  --duration-stagger: 40ms;
-  --duration-micro: 80ms;
-  --duration-quick: 150ms; /* every close, text swap, tooltip in */
-  --duration-fast: 250ms; /* every open, tabs, icon swap, page slide */
-  --duration-medium: 280ms; /* panel close, toast close */
-  --duration-slow: 300ms; /* panel open, skeleton reveal, emphasis: badge, text reveal, success check. The UI ceiling. */
-  --duration-overlay: 500ms; /* modal, drawer, marketing explainer: the only place past 300ms */
-  --duration-loop: 500ms; /* one cycle of a spinner or flowing dash, not a transition */
-
-  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); /* all surface motion */
-  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* swaps, cross-fades, on-screen movement */
-  --ease-out: ease-out; /* tooltips */
-  --ease-linear: linear; /* shimmer, pulse, spinner */
-
-  --distance-micro: 4px;
-  --distance-small: 6px;
-  --distance-base: 8px;
-  --distance-medium: 12px;
-  --distance-large: 30px;
-
-  --scale-large: 0.96; /* modal */
-  --scale-medium: 0.97; /* dropdown, popover open */
-  --scale-small: 0.98; /* tooltip */
-  --scale-tiny: 0.99; /* dropdown close */
-
-  --blur-small: 2px;
-  --blur-medium: 3px;
-  --blur-large: 8px;
-}
-
-/* Tailwind utility aliases, so `shadow-card`, `duration-fast` and
-   `ease-smooth-out` exist as classes and a component can stay in utilities
-   instead of dropping into a style block for one shadow. */
-@theme inline {
-  --shadow-hairline: var(--elev-hairline);
-  --shadow-btn: var(--elev-btn);
-  --shadow-card: var(--elev-card);
-  --shadow-raised: var(--elev-raised);
-  --shadow-overlay: var(--elev-overlay);
-  --shadow-field: var(--elev-field);
-  --shadow-rim: var(--elev-rim);
-  /* A filled control: the lit top edge and the resting lift, in one class,
-     because the two never appear apart and utilities cannot be stacked. */
-  --shadow-key: var(--elev-rim), var(--elev-btn);
-  /* The composed pair, for a surface that draws no border of its own. */
-  --shadow-edge-card: var(--elev-hairline), var(--elev-card);
-  --shadow-edge-raised: var(--elev-hairline), var(--elev-raised);
-  --shadow-edge-overlay: var(--elev-hairline), var(--elev-overlay);
-
-  --ease-smooth-out: var(--ease-smooth-out);
-
-  /* Tailwind's `duration-*` reads `--transition-duration-*`, not `--duration-*`,
-     so without these `duration-fast` silently compiles to nothing and nothing
-     animates (found 31 Aug 2026). */
-  --transition-duration-micro: var(--duration-micro);
-  --transition-duration-quick: var(--duration-quick);
-  --transition-duration-fast: var(--duration-fast);
-  --transition-duration-medium: var(--duration-medium);
-  --transition-duration-slow: var(--duration-slow);
-  --transition-duration-overlay: var(--duration-overlay);
-  --transition-duration-loop: var(--duration-loop);
-}
-
-/* Each bits-ui variant matches v2's `data-open` and v1's `data-state`, and ships
- * here because an app that defined only the palette got a switch that never moved. */
-@custom-variant data-open {
-  &:where([data-state="open"]),
-  &:where([data-open]:not([data-open="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-closed {
-  &:where([data-state="closed"]),
-  &:where([data-closed]:not([data-closed="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-checked {
-  &:where([data-state="checked"]),
-  &:where([data-checked]:not([data-checked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-unchecked {
-  &:where([data-state="unchecked"]),
-  &:where([data-unchecked]:not([data-unchecked="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-selected {
-  &:where([data-selected]) {
-    @slot;
-  }
-}
-
-@custom-variant data-disabled {
-  &:where([data-disabled="true"]),
-  &:where([data-disabled]:not([data-disabled="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-active {
-  &:where([data-state="active"]),
-  &:where([data-active]:not([data-active="false"])) {
-    @slot;
-  }
-}
-
-@custom-variant data-horizontal {
-  &:where([data-orientation="horizontal"]) {
-    @slot;
-  }
-}
-
-@custom-variant data-vertical {
-  &:where([data-orientation="vertical"]) {
-    @slot;
-  }
-}

package/src/design/polish.css

@@ -1,150 +0,0 @@
-/* Keep every rule here inside a layer: unlayered CSS beats all layered rules, so a bare
- * `:where()` would silently outrank `focus-visible:ring-3` on every control. */
-
-@layer base {
-  /* One ring for the whole kit. `:where` keeps it at specificity zero on top of
-     the layer, so a control that needs a different ring writes one and wins. */
-  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
-    outline: none;
-    box-shadow: var(--ring-focus);
-  }
-
-  /* The accent at a low alpha, not the browser blue, because a selected word is
-     the one moment the palette shows up inside running text. */
-  ::selection {
-    background: color-mix(in oklab, var(--ring-color) 24%, transparent);
-  }
-
-  /* The default macOS scrollbar paints a black bar on a dark panel, so the track stays
-     transparent and the border insets the thumb. */
-  :where(html) {
-    scrollbar-color: var(--color-border, var(--border)) transparent;
-  }
-
-  ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border: 3px solid transparent;
-    background-clip: padding-box;
-    border-radius: 999px;
-    background-color: var(--color-border, var(--border));
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    ::-webkit-scrollbar-thumb:hover {
-      background-color: var(--color-muted-foreground, var(--muted-foreground));
-    }
-  }
-}
-
-@layer components {
-  /* Classes, not tokens, so the reduced motion guard lives here once instead of in
-     every component. */
-
-  /* A key that travels down a pixel when pressed, because a colour change alone
-     reads as hover, not as a press. */
-  .t-press {
-    transition:
-      background-color var(--duration-quick) var(--ease-smooth-out),
-      border-color var(--duration-quick) var(--ease-smooth-out),
-      color var(--duration-quick) var(--ease-smooth-out),
-      box-shadow var(--duration-quick) var(--ease-smooth-out),
-      transform var(--duration-micro) var(--ease-smooth-out);
-  }
-
-  .t-press:active:not(:disabled, [aria-disabled="true"]) {
-    transform: translateY(1px);
-  }
-
-  /* The card rises a pixel and gains an elevation step, so hover reads as the card
-     coming forward, not its border changing colour. */
-  .t-lift {
-    transition:
-      box-shadow var(--duration-fast) var(--ease-smooth-out),
-      transform var(--duration-fast) var(--ease-smooth-out);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .t-lift:hover {
-      transform: translateY(-1px);
-      box-shadow: var(--elev-raised);
-    }
-  }
-
-  /* A surface arriving. The open carries the distance, the scale and the blur;
-     the close drops all three and takes less time, per the open/close
-     asymmetry rule in transitions-dev. */
-  .t-enter {
-    animation: t-enter var(--duration-fast) var(--ease-smooth-out) both;
-  }
-
-  .t-exit {
-    animation: t-exit var(--duration-quick) var(--ease-smooth-out) both;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .t-press,
-    .t-lift {
-      transition: none;
-    }
-
-    .t-press:active {
-      transform: none;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      .t-lift:hover {
-        transform: none;
-      }
-    }
-
-    .t-enter,
-    .t-exit {
-      animation-duration: 1ms;
-    }
-  }
-}
-
-@keyframes t-enter {
-  from {
-    opacity: 0;
-    transform: translateY(var(--distance-micro)) scale(var(--scale-medium));
-    filter: blur(var(--blur-small));
-  }
-  to {
-    opacity: 1;
-    transform: none;
-    filter: none;
-  }
-}
-
-/* A mark confirming a state that has already changed: it arrives after the box
-   it sits in, so it overshoots slightly instead of fading. */
-@keyframes t-check {
-  from {
-    opacity: 0;
-    transform: scale(0.4);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes t-exit {
-  from {
-    opacity: 1;
-    transform: none;
-  }
-  to {
-    opacity: 0;
-    transform: scale(var(--scale-tiny));
-  }
-}

package/src/icons/TradeIcon.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { tradeIconMap, type TradeSlug } from "./trades.js";
-
-	let {
-		trade,
-		size = 14,
-		stroke = 2,
-		class: className = "",
-	}: { trade: TradeSlug; size?: number; stroke?: number; class?: string } = $props();
-
-	let Icon = $derived(tradeIconMap[trade]);
-</script>
-
-{#if Icon}
-	<Icon {size} {stroke} class={className} aria-hidden="true" focusable="false" />
-{/if}

package/src/icons/trades.ts

@@ -1,89 +0,0 @@
-/**
- * Trade icon map. Tabler covers the domain Lucide and Phosphor miss.
- */
-
-/*
- * Lucide/Phosphor gap audit (Sept 2026) against the 14 trade pills in the "NOT SURE? TAP WHAT YOU DO" strip. Lucide has `hammer`, `wrench`, `hard-hat`, `bolt`, `brick-wall`,
- */
-
-/*
- * `building`, `car`, but no `trowel`, no tiling grid, no `window` cleaning `spray/squeegee`, no `crane`, no dedicated `handyman` toolset. Phosphor has `hammer`, `wrench`, `hard-hat`, `paint-roller`, and also no `trowel`.
- */
-
-/*
- * Tabler 3.46 (6184 icons, MIT) has all 14 at a consistent 2px stroke on 24×24: droplet/pipe, bolt, home (roof), tools, key, window,
- */
-
-/*
- * car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not the Svelte 4 ` @tabler/icons-svelte`).
- */
-
-import {
-  IconBolt,
-  IconCar,
-  IconCarGarage,
-  IconCrane,
-  IconDroplet,
-  IconGridDots,
-  IconHammer,
-  IconHelmet,
-  IconHome,
-  IconKey,
-  IconLeaf,
-  IconTools,
-  IconTrowel,
-  IconWindow,
-} from "@tabler/icons-svelte-runes";
-import type { Component } from "svelte";
-
-export type TradeSlug =
-  | "plumbers"
-  | "electricians"
-  | "roofers"
-  | "handymen"
-  | "locksmiths"
-  | "window-cleaners"
-  | "garages"
-  | "carpenters"
-  | "builders"
-  | "plasterers"
-  | "tilers"
-  | "gardeners"
-  | "mobile-mechanics"
-  | "construction-companies";
-
-export const tradeIconMap: Record<TradeSlug, Component> = {
-  plumbers: IconDroplet,
-  electricians: IconBolt,
-  roofers: IconHome,
-  handymen: IconTools,
-  locksmiths: IconKey,
-  "window-cleaners": IconWindow,
-  garages: IconCarGarage,
-  carpenters: IconHammer,
-  builders: IconHelmet,
-  plasterers: IconTrowel,
-  tilers: IconGridDots,
-  gardeners: IconLeaf,
-  "mobile-mechanics": IconCar,
-  "construction-companies": IconCrane,
-};
-
-export const tradeLabels: Record<TradeSlug, string> = {
-  plumbers: "PLUMBERS",
-  electricians: "ELECTRICIANS",
-  roofers: "ROOFERS",
-  handymen: "HANDYMEN",
-  locksmiths: "LOCKSMITHS",
-  "window-cleaners": "WINDOW CLEANERS",
-  garages: "GARAGES",
-  carpenters: "CARPENTERS",
-  builders: "BUILDERS",
-  plasterers: "PLASTERERS",
-  tilers: "TILERS",
-  gardeners: "GARDENERS",
-  "mobile-mechanics": "MOBILE MECHANICS",
-  "construction-companies": "CONSTRUCTION COMPANIES",
-};
-
-export const tradeSlugs: TradeSlug[] = Object.keys(tradeIconMap) as TradeSlug[];

package/src/index.ts

@@ -1,53 +0,0 @@
-export { default as BorderBeam } from "./effects/border-beam/BorderBeam.svelte";
-export type { BorderBeamProps } from "./effects/border-beam/types.js";
-export type {
-  BorderBeamColorVariant,
-  BorderBeamSize,
-  BorderBeamTheme,
-  SizeConfig,
-  ThemeColors,
-} from "./effects/border-beam/presets.js";
-export { sizePresets, sizeThemePresets, themeColors } from "./effects/border-beam/presets.js";
-
-export { default as ThemeToggle } from "./effects/theme-toggle/ThemeToggle.svelte";
-
-export { default as AnimatedBeam } from "./effects/animated-beam/AnimatedBeam.svelte";
-export type { AnimatedBeamProps, AnchorPosition } from "./effects/animated-beam/types.js";
-
-export { default as Spotlight } from "./effects/spotlight/Spotlight.svelte";
-
-export { default as MagicCard } from "./effects/magic-card/MagicCard.svelte";
-
-export { default as Marquee } from "./effects/marquee/Marquee.svelte";
-
-export { default as ImageReveal } from "./effects/image-reveal/ImageReveal.svelte";
-export type { ImageRevealProps, ImageRevealHandle } from "./effects/image-reveal/types.js";
-
-export { default as ShaderGradient } from "./effects/shader-gradient/ShaderGradient.svelte";
-export type {
-  ShaderGradientProps,
-  ShaderGradientUniforms,
-} from "./effects/shader-gradient/types.js";
-
-export { default as InView } from "./effects/reveal/InView.svelte";
-export { default as AnimatedGroup } from "./effects/reveal/AnimatedGroup.svelte";
-export { default as TextEffect } from "./effects/reveal/TextEffect.svelte";
-export { observeInView } from "./effects/reveal/observe.js";
-export type {
-  RevealPreset,
-  RevealPer,
-  RevealTiming,
-  RevealViewOptions,
-} from "./effects/reveal/types.js";
-
-export { default as ProgressiveBlur } from "./effects/progressive-blur/ProgressiveBlur.svelte";
-
-export { default as InteractiveHoverButton } from "./effects/interactive-hover-button/InteractiveHoverButton.svelte";
-
-export { default as ImageComparison } from "./effects/image-comparison/ImageComparison.svelte";
-
-export { magnetic } from "./effects/magnetic/magnetic.js";
-export type { MagneticOptions } from "./effects/magnetic/magnetic.js";
-
-export { revealTheme } from "./lib/theme-transition.js";
-export type { RevealOrigin, RevealThemeOptions } from "./lib/theme-transition.js";