@alpic-ai/ui 1.160.0 → 1.161.0

package/dist/components/attachment-tile.d.mts

@@ -1,14 +1,10 @@
 //#region src/components/attachment-tile.d.ts
 interface AttachmentTileProps {
-  /** Source URL for the attachment thumbnail */
   src?: string;
-  /** Whether the attachment is an image */
   isImage?: boolean;
   /** Accessible label describing the attachment */
   label?: string;
-  /** Called when the remove button is clicked */
   onRemove?: () => void;
-  /** Called when the tile is clicked (e.g. to open a preview) */
   onClick?: () => void;
   className?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.160.0",
+  "version": "1.161.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {

package/src/components/attachment-tile.tsx

@@ -7,15 +7,11 @@ import { cn } from "../lib/cn";
 import { TooltipIconButton } from "./tooltip-icon-button";
 
 interface AttachmentTileProps {
-  /** Source URL for the attachment thumbnail */
   src?: string;
-  /** Whether the attachment is an image */
   isImage?: boolean;
   /** Accessible label describing the attachment */
   label?: string;
-  /** Called when the remove button is clicked */
   onRemove?: () => void;
-  /** Called when the tile is clicked (e.g. to open a preview) */
   onClick?: () => void;
   className?: string;
 }

package/src/components/avatar.tsx

@@ -84,8 +84,6 @@ function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Ava
   );
 }
 
-// ─── AvatarLabelGroup ─────────────────────────────────────────────────────────
-
 interface AvatarLabelGroupProps extends React.ComponentProps<"div"> {
   size?: "sm" | "md";
   src?: string;

package/src/components/combobox.tsx

@@ -10,8 +10,6 @@ import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { selectTriggerVariants } from "./select-trigger-variants";
 import { TagDismissible } from "./tag";
 
-/* ── Context ──────────────────────────────────────────────────────────────── */
-
 interface ComboboxContextValue {
   multiple: boolean;
   value: string | null;
@@ -35,8 +33,6 @@ function useComboboxContext() {
   return context;
 }
 
-/* ── Root ─────────────────────────────────────────────────────────────────── */
-
 interface ComboboxBaseProps {
   children: ReactNode;
   open?: boolean;
@@ -194,8 +190,6 @@ function Combobox(props: ComboboxProps) {
   );
 }
 
-/* ── Trigger ──────────────────────────────────────────────────────────────── */
-
 interface ComboboxTriggerProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size">,
     VariantProps<typeof selectTriggerVariants> {
@@ -232,8 +226,6 @@ function ComboboxTrigger({ className, size, placeholder, children, ...props }: C
   );
 }
 
-/* ── Tags (internal, for multi-select trigger) ────────────────────────────── */
-
 function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (value: string) => void }) {
   const { getOptionLabel } = useComboboxContext();
   return (
@@ -251,8 +243,6 @@ function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (v
   );
 }
 
-/* ── Content ──────────────────────────────────────────────────────────────── */
-
 interface ComboboxContentProps extends React.ComponentProps<typeof PopoverContent> {
   className?: string;
   children?: ReactNode;
@@ -280,8 +270,6 @@ function ComboboxContent({ className, children, filter, ...props }: ComboboxCont
   );
 }
 
-/* ── Search ───────────────────────────────────────────────────────────────── */
-
 function ComboboxSearch({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div data-slot="combobox-search" className="flex items-center gap-2 border-b border-border-secondary px-3 py-2.5">
@@ -300,8 +288,6 @@ function ComboboxSearch({ className, ...props }: React.ComponentProps<typeof Com
   );
 }
 
-/* ── List ─────────────────────────────────────────────────────────────────── */
-
 function ComboboxList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
@@ -312,8 +298,6 @@ function ComboboxList({ className, ...props }: React.ComponentProps<typeof Comma
   );
 }
 
-/* ── Empty ────────────────────────────────────────────────────────────────── */
-
 function ComboboxEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
@@ -324,8 +308,6 @@ function ComboboxEmpty({ className, ...props }: React.ComponentProps<typeof Comm
   );
 }
 
-/* ── Group ────────────────────────────────────────────────────────────────── */
-
 function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
   return (
     <CommandPrimitive.Group
@@ -339,8 +321,6 @@ function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof Comm
   );
 }
 
-/* ── Separator ────────────────────────────────────────────────────────────── */
-
 function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
@@ -351,8 +331,6 @@ function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof
   );
 }
 
-/* ── Item ─────────────────────────────────────────────────────────────────── */
-
 interface ComboboxItemProps extends Omit<React.ComponentProps<typeof CommandPrimitive.Item>, "onSelect"> {
   /** The value stored when this item is selected */
   itemValue: string;
@@ -384,8 +362,6 @@ function ComboboxItem({ className, children, itemValue, ...props }: ComboboxItem
   );
 }
 
-/* ── Item supporting text ─────────────────────────────────────────────────── */
-
 function ComboboxItemText({ className, children, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span

package/src/components/dropdown-menu.tsx

@@ -51,8 +51,6 @@ function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMen
   return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
-/* ── Item ─────────────────────────────────────────────────────────────────── */
-
 const dropdownMenuItemVariants = cva(
   [
     "relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-2 outline-hidden select-none",
@@ -103,8 +101,6 @@ function DropdownMenuItem({
   );
 }
 
-/* ── Label ────────────────────────────────────────────────────────────────── */
-
 function DropdownMenuLabel({
   className,
   inset,
@@ -135,8 +131,6 @@ function DropdownMenuHeader({ className, children, ...props }: React.HTMLAttribu
   );
 }
 
-/* ── Separator ────────────────────────────────────────────────────────────── */
-
 function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
@@ -147,8 +141,6 @@ function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typ
   );
 }
 
-/* ── Shortcut ─────────────────────────────────────────────────────────────── */
-
 function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
@@ -162,8 +154,6 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"spa
   );
 }
 
-/* ── Sub menu ─────────────────────────────────────────────────────────────── */
-
 function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }

package/src/components/form.tsx

@@ -166,8 +166,6 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
   );
 }
 
-/* ── Layout components ───────────────────────────────────────────────────── */
-
 interface FormHeaderProps extends React.ComponentProps<"div"> {
   title: string;
   description?: string;
@@ -186,8 +184,6 @@ function FormFields({ className, ...props }: React.ComponentProps<"div">) {
   return <div className={cn("flex flex-col gap-6", className)} {...props} />;
 }
 
-/* ── Convenience field wrappers ─────────────────────────────────────────── */
-
 interface FormFieldBaseProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> {
   control: ControllerProps<TFieldValues, TName>["control"];
   name: TName;

package/src/components/select.tsx

@@ -20,8 +20,6 @@ function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.V
   return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
-/* ── Trigger ──────────────────────────────────────────────────────────────── */
-
 function SelectTrigger({
   className,
   size = "md",
@@ -47,8 +45,6 @@ function SelectTrigger({
   );
 }
 
-/* ── Content ──────────────────────────────────────────────────────────────── */
-
 function SelectContent({
   className,
   children,
@@ -89,8 +85,6 @@ function SelectContent({
   );
 }
 
-/* ── Label ────────────────────────────────────────────────────────────────── */
-
 function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
@@ -101,8 +95,6 @@ function SelectLabel({ className, ...props }: React.ComponentProps<typeof Select
   );
 }
 
-/* ── Item ─────────────────────────────────────────────────────────────────── */
-
 function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item
@@ -128,8 +120,6 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
   );
 }
 
-/* ── Separator ────────────────────────────────────────────────────────────── */
-
 function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
   return (
     <SelectPrimitive.Separator

package/src/components/sidebar.tsx

@@ -88,7 +88,6 @@ function SidebarProvider({
     [setOpenProp, open],
   );
 
-  // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
   }, [isMobile, setOpen]);
@@ -240,7 +239,6 @@ function Sidebar({
           side === "left"
             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
             : "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",

package/src/components/tabs.tsx

@@ -21,8 +21,6 @@ import { createContext, use } from "react";
 
 import { cn } from "../lib/cn";
 
-/* ─── Shared trigger styles ──────────────────────────────────────────────── */
-
 const tabsTriggerVariants = cva(
   [
     "type-text-sm items-center gap-1.5 font-medium",
@@ -57,8 +55,6 @@ const tabsTriggerVariants = cva(
   },
 );
 
-/* ─── Tabs (state-based, in-page content switching) ────────────────── */
-
 function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
     <TabsPrimitive.Root
@@ -134,8 +130,6 @@ function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPr
   return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />;
 }
 
-/* ─── Navigation tabs (semantic <nav>/<ul>/<a>, for URL-based routing) ──── */
-
 type TabsNavVariant = "line" | "pill";
 type TabsNavOrientation = "horizontal" | "vertical";
 

package/src/components/tag.tsx

@@ -9,8 +9,6 @@ interface TagBaseProps {
   icon?: React.ReactNode;
 }
 
-/* ── Tag (text only) ──────────────────────────────────────────── */
-
 interface TagProps extends React.ComponentProps<"span">, TagBaseProps {}
 
 function Tag({ className, icon, children, ...props }: TagProps) {
@@ -22,8 +20,6 @@ function Tag({ className, icon, children, ...props }: TagProps) {
   );
 }
 
-/* ── TagDismissible (with × button) ───────────────────────────── */
-
 interface TagDismissibleProps extends React.ComponentProps<"span">, TagBaseProps {
   onDismiss?: () => void;
 }
@@ -61,8 +57,6 @@ function TagDismissible({ className, icon, children, onDismiss, ...props }: TagD
   );
 }
 
-/* ── TagCount (with count badge) ──────────────────────────────── */
-
 interface TagCountProps extends React.ComponentProps<"span">, TagBaseProps {
   count: number;
 }

package/src/stories/button.stories.tsx

@@ -16,7 +16,6 @@ const ICON_STATE_HEADER = "type-text-xs text-muted-foreground font-medium w-16 t
 export const AllVariants = () => {
   return (
     <div className="flex flex-col gap-3 p-8">
-      {/* ── Text buttons ────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>Text</span>
 
       <div className={ROW}>
@@ -26,7 +25,6 @@ export const AllVariants = () => {
         <div className={STATE_HEADER}>Loading</div>
       </div>
 
-      {/* Primary */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Primary</span>
         <div className={CELL}>
@@ -46,7 +44,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Secondary */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Secondary</span>
         <div className={CELL}>
@@ -66,7 +63,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Tertiary */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Tertiary</span>
         <div className={CELL}>
@@ -86,7 +82,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Link color */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Link</span>
         <div className={CELL}>
@@ -104,7 +99,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Link gray */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Link muted</span>
         <div className={CELL}>
@@ -122,7 +116,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Destructive */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Destructive</span>
         <div className={CELL}>
@@ -142,7 +135,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* ── Icon only ───────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>Icon only</span>
 
       <div className={ROW}>
@@ -213,7 +205,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* ── Icon rounded ────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>Icon rounded</span>
 
       <div className={ROW}>
@@ -284,7 +275,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* ── Pill ──────────────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>Pill</span>
 
       <div className="flex items-center gap-3">
@@ -302,7 +292,6 @@ export const AllVariants = () => {
         </Button>
       </div>
 
-      {/* ── With icon (leading) ──────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>With icon</span>
 
       <div className="flex items-center gap-3">
@@ -323,7 +312,6 @@ export const AllVariants = () => {
         </Button>
       </div>
 
-      {/* ── CTA (animated gradient ring) ────────────────────────────────── */}
       <span className={SECTION_HEADER}>CTA — animated</span>
       <p className="type-text-xs text-muted-foreground -mt-2 max-w-md">
         Hover to rotate the conic gradient around the border and ignite the soft halo.
@@ -345,7 +333,6 @@ export const AllVariants = () => {
         </Button>
       </div>
 
-      {/* ── asChild ─────────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>asChild</span>
 
       <div className="flex items-center gap-3">

package/src/stories/combobox.stories.tsx

@@ -15,8 +15,6 @@ import {
 } from "../components/combobox";
 import { CommandItem } from "../components/command";
 
-/* ── With search ──────────────────────────────────────────────────────────── */
-
 const branches = ["main", "develop", "feature/auth", "feature/dashboard", "fix/login-bug", "release/v2.0"];
 
 function SearchCombobox() {
@@ -44,8 +42,6 @@ function SearchCombobox() {
   );
 }
 
-/* ── Custom trigger content (avatars + supporting text) ──────────────────── */
-
 const people = [
   { id: "olivia", name: "Olivia Rhye", handle: "@olivia" },
   { id: "phoenix", name: "Phoenix Baker", handle: "@phoenix" },
@@ -90,8 +86,6 @@ function AvatarCombobox() {
   );
 }
 
-/* ── With CommandItem action ─────────────────────────────────────────────── */
-
 const namespaces = [
   { id: "acme", name: "acme-corp" },
   { id: "personal", name: "johndoe" },
@@ -127,8 +121,6 @@ function CommandActionCombobox() {
   );
 }
 
-/* ── Grouped with headings ───────────────────────────────────────────────── */
-
 function GroupedCombobox() {
   const [value, setValue] = useState<string | null>(null);
   return (
@@ -154,8 +146,6 @@ function GroupedCombobox() {
   );
 }
 
-/* ── Multi-select with tags ───────────────────────────────────────────────── */
-
 function MultiCombobox() {
   const [values, setValues] = useState<string[]>(["phoenix", "olivia"]);
   return (
@@ -182,8 +172,6 @@ function MultiCombobox() {
   );
 }
 
-/* ── Story ────────────────────────────────────────────────────────────────── */
-
 export const AllVariants: Story = () => (
   <div className="grid grid-cols-1 gap-10 p-10 md:grid-cols-2">
     <div className="flex flex-col gap-1.5">

package/src/stories/dropdown-menu.stories.tsx

@@ -34,7 +34,6 @@ import {
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-10 p-10">
-    {/* Basic with icons & shortcuts */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Default with icons &amp; shortcuts</p>
       <DropdownMenu>
@@ -122,7 +121,6 @@ export const AllVariants: Story = () => (
       </DropdownMenu>
     </div>
 
-    {/* Destructive variant */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Destructive item</p>
       <DropdownMenu>
@@ -143,7 +141,6 @@ export const AllVariants: Story = () => (
       </DropdownMenu>
     </div>
 
-    {/* Header with avatar */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">With header (avatar group)</p>
       <DropdownMenu>
@@ -173,7 +170,6 @@ export const AllVariants: Story = () => (
       </DropdownMenu>
     </div>
 
-    {/* Disabled items */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Disabled items</p>
       <DropdownMenu>

package/src/stories/form.stories.tsx

@@ -13,8 +13,6 @@ import {
   TextareaField,
 } from "../components/form";
 
-/* ── Types ───────────────────────────────────────────────────────────────── */
-
 interface CreateProjectForm {
   email: string;
   role: string;
@@ -43,8 +41,6 @@ const capabilities = [
   { value: "admin", label: "Admin" },
 ];
 
-/* ── Composed Form ───────────────────────────────────────────────────────── */
-
 function ComposedForm() {
   const form = useForm<CreateProjectForm>({
     defaultValues: {
@@ -141,8 +137,6 @@ function ComposedForm() {
   );
 }
 
-/* ── Story ────────────────────────────────────────────────────────────────── */
-
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-3">
     <p className="type-text-xs font-medium text-subtle-foreground uppercase tracking-wide">

package/src/stories/input-group.stories.tsx

@@ -7,7 +7,6 @@ const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-6 p-8 max-w-lg">
-    {/* Textarea with block-end addon */}
     <span className={SECTION_HEADER}>Textarea + block-end footer</span>
     <InputGroup>
       <InputGroupTextarea placeholder="Type a message…" />
@@ -21,7 +20,6 @@ export const AllVariants: Story = () => (
       </InputGroupAddon>
     </InputGroup>
 
-    {/* Inline-start addon */}
     <span className={SECTION_HEADER}>Inline-start addon (icon)</span>
     <InputGroup>
       <InputGroupAddon align="inline-start">
@@ -34,7 +32,6 @@ export const AllVariants: Story = () => (
       />
     </InputGroup>
 
-    {/* Inline-end addon */}
     <span className={SECTION_HEADER}>Inline-end addon (button)</span>
     <InputGroup>
       <input
@@ -49,7 +46,6 @@ export const AllVariants: Story = () => (
       </InputGroupAddon>
     </InputGroup>
 
-    {/* Disabled state */}
     <span className={SECTION_HEADER}>Disabled</span>
     <InputGroup>
       <InputGroupTextarea placeholder="Cannot type here…" disabled />

package/src/stories/input.stories.tsx

@@ -7,11 +7,9 @@ const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-6 p-8 max-w-sm">
-    {/* Default */}
     <span className={SECTION_HEADER}>Default</span>
     <Input id="default" placeholder="alice@example.com" />
 
-    {/* With label + hint */}
     <span className={SECTION_HEADER}>With label + hint</span>
     <Input
       id="with-label"
@@ -21,7 +19,6 @@ export const AllVariants: Story = () => (
       hint="This is a hint text to help user."
     />
 
-    {/* With tooltip */}
     <span className={SECTION_HEADER}>With tooltip</span>
     <Input
       id="with-tooltip"
@@ -31,7 +28,6 @@ export const AllVariants: Story = () => (
       placeholder="alice@example.com"
     />
 
-    {/* Error */}
     <span className={SECTION_HEADER}>Error</span>
     <Input
       id="error"
@@ -41,7 +37,6 @@ export const AllVariants: Story = () => (
       error="Please enter a valid email address."
     />
 
-    {/* Disabled */}
     <span className={SECTION_HEADER}>Disabled</span>
     <Input
       id="disabled"
@@ -51,15 +46,12 @@ export const AllVariants: Story = () => (
       disabled
     />
 
-    {/* Leading icon */}
     <span className={SECTION_HEADER}>Leading icon (email)</span>
     <Input id="leading-icon" label="Email" required placeholder="alice@example.com" leadingIcon={<Mail />} />
 
-    {/* Leading text (website) */}
     <span className={SECTION_HEADER}>Leading text</span>
     <Input id="leading-text" label="Website" required placeholder="www.example.com" leadingText="http://" />
 
-    {/* Small size */}
     <span className={SECTION_HEADER}>Small size</span>
     <Input id="sm-default" size="sm" placeholder="alice@example.com" label="Email" />
 

package/src/stories/skeleton.stories.tsx

@@ -4,7 +4,6 @@ import { Skeleton } from "../components/skeleton";
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-8">
-    {/* Shape variants */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Rectangle (default)</p>
       <div className="flex flex-col gap-2">
@@ -23,7 +22,6 @@ export const AllVariants: Story = () => (
       </div>
     </div>
 
-    {/* Common compositions */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Card placeholder</p>
       <div className="flex flex-col gap-3 rounded-lg border border-border p-4">

package/src/stories/table.stories.tsx

@@ -88,7 +88,6 @@ const PAGE_SIZE = 3;
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-8 p-6 bg-background max-w-4xl">
-    {/* Text-only table */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Text cells</p>
       <Table>
@@ -115,7 +114,6 @@ export const AllVariants: Story = () => (
       </Table>
     </div>
 
-    {/* Avatar cells + checkbox */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Avatar cells + checkbox</p>
       <Table>
@@ -148,7 +146,6 @@ export const AllVariants: Story = () => (
       </Table>
     </div>
 
-    {/* With footer */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">With caption + footer</p>
       <Table>
@@ -178,7 +175,6 @@ export const AllVariants: Story = () => (
       </Table>
     </div>
 
-    {/* Selected row state */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Selected row state</p>
       <Table>
@@ -201,7 +197,6 @@ export const AllVariants: Story = () => (
       </Table>
     </div>
 
-    {/* Paginated table */}
     <PaginatedTableExample />
   </div>
 );

package/src/stories/tabs.stories.tsx

@@ -42,9 +42,6 @@ export const AllVariants: Story = () => {
 
   return (
     <div className="flex flex-col gap-10 p-8">
-      {/* ─── Navigation tabs ─────────────────────────────────────── */}
-
-      {/* Horizontal + line (default) */}
       <div>
         <p className={SECTION_HEADER}>Nav — horizontal, variant="line" (default)</p>
         <div className="mt-4">
@@ -61,7 +58,6 @@ export const AllVariants: Story = () => {
         </div>
       </div>
 
-      {/* Horizontal + pill */}
       <div>
         <p className={SECTION_HEADER}>Nav — horizontal, variant="pill"</p>
         <div className="mt-4">
@@ -78,7 +74,6 @@ export const AllVariants: Story = () => {
         </div>
       </div>
 
-      {/* Vertical + pill (default) */}
       <div>
         <p className={SECTION_HEADER}>Nav — vertical, variant="pill" (default)</p>
         <div className="mt-4 flex gap-6">
@@ -99,9 +94,6 @@ export const AllVariants: Story = () => {
         </div>
       </div>
 
-      {/* ─── Tabs (state-based) ────────────────────────────── */}
-
-      {/* Tabs — line */}
       <div>
         <p className={SECTION_HEADER}>Tabs — line variant</p>
         <Tabs defaultValue="all" className="mt-4">
@@ -118,7 +110,6 @@ export const AllVariants: Story = () => {
         </Tabs>
       </div>
 
-      {/* Tabs — default (horizontal) */}
       <div>
         <p className={SECTION_HEADER}>Tabs — default variant (horizontal)</p>
         <Tabs defaultValue="all" className="mt-4">
@@ -135,7 +126,6 @@ export const AllVariants: Story = () => {
         </Tabs>
       </div>
 
-      {/* Tabs — default (vertical) */}
       <div>
         <p className={SECTION_HEADER}>Tabs — default variant (vertical)</p>
         <Tabs defaultValue="overview" orientation="vertical" className="mt-4">
@@ -150,7 +140,6 @@ export const AllVariants: Story = () => {
         </Tabs>
       </div>
 
-      {/* Tabs — disabled */}
       <div>
         <p className={SECTION_HEADER}>Tabs — disabled trigger</p>
         <Tabs defaultValue="one" className="mt-4">

package/src/stories/toggle-group.stories.tsx

@@ -8,7 +8,6 @@ const LABEL = "type-text-xs text-muted-foreground w-20 shrink-0";
 
 export const AllVariants = () => (
   <div className="flex flex-col gap-4 p-8">
-    {/* ── Default variant ──────────────────────────────────────────────── */}
     <span className={SECTION_HEADER}>Default variant</span>
 
     <div className={ROW}>
@@ -44,7 +43,6 @@ export const AllVariants = () => (
       </ToggleGroup>
     </div>
 
-    {/* ── Outline variant ─────────────────────────────────────────────── */}
     <span className={SECTION_HEADER}>Outline variant</span>
 
     <div className={ROW}>
@@ -77,7 +75,6 @@ export const AllVariants = () => (
       </ToggleGroup>
     </div>
 
-    {/* ── Sizes ───────────────────────────────────────────────────────── */}
     <span className={SECTION_HEADER}>Sizes</span>
 
     <div className={ROW}>
@@ -104,7 +101,6 @@ export const AllVariants = () => (
       </ToggleGroup>
     </div>
 
-    {/* ── Disabled ────────────────────────────────────────────────────── */}
     <span className={SECTION_HEADER}>Disabled</span>
 
     <div className={ROW}>
@@ -119,7 +115,6 @@ export const AllVariants = () => (
       </ToggleGroup>
     </div>
 
-    {/* ── Real-world: Log level filter ────────────────────────────────── */}
     <span className={SECTION_HEADER}>Log level filter (real-world)</span>
 
     <div className={ROW}>

package/src/stories/wizard.stories.tsx

@@ -36,7 +36,6 @@ export const AllVariants: Story = () => {
 
   return (
     <div className="flex flex-col gap-10 p-8">
-      {/* Full rail (steps + progress) */}
       <div>
         <p className={SECTION_HEADER}>Full rail — steps + progress</p>
         <div className="mt-4 flex gap-6">
@@ -50,7 +49,6 @@ export const AllVariants: Story = () => {
         </div>
       </div>
 
-      {/* Steps only */}
       <div>
         <p className={SECTION_HEADER}>Steps only</p>
         <div className="mt-4 max-w-56">
@@ -58,7 +56,6 @@ export const AllVariants: Story = () => {
         </div>
       </div>
 
-      {/* Progress only — various positions */}
       <div>
         <p className={SECTION_HEADER}>Progress — first step</p>
         <div className="mt-4 max-w-56">