minka-ds 0.1.4 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minka-ds",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Minka product design system — tokenized component library",
   "license": "MIT",
   "files": [
@@ -23,6 +23,7 @@
     "lucide-react": "^1.14.0",
     "radix-ui": "^1.4.3",
     "react-day-picker": "^10.0.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
   }

package/src/components/ui/cell.tsx

@@ -10,12 +10,13 @@ import { cn } from "../../lib/utils"
 interface TextStackProps {
   primary: React.ReactNode
   secondary?: React.ReactNode
+  inline?: boolean
   className?: string
 }
 
-function TextStack({ primary, secondary, className }: TextStackProps) {
+function TextStack({ primary, secondary, inline, className }: TextStackProps) {
   return (
-    <div className={cn("flex flex-col gap-0.5", className)}>
+    <div className={cn(inline ? "flex flex-row items-baseline gap-1.5" : "flex flex-col gap-0.5", className)}>
       <span className="text-caption-light text-[var(--color-text-default)]">{primary}</span>
       {secondary && (
         <span className="text-caption-sm-light text-[var(--color-text-muted)]">{secondary}</span>

package/src/components/ui/data-table.tsx

@@ -108,16 +108,19 @@ interface DataTableProps<TData, TValue> {
   data: TData[]
   batchSize?: number
   onRowClick?: (row: TData) => void
+  variant?: "default" | "compact"
   className?: string
 }
 
 function DataTable<TData, TValue>({
   columns,
   data,
-  batchSize = 20,
+  batchSize = 40,
   onRowClick,
+  variant = "default",
   className,
 }: DataTableProps<TData, TValue>) {
+  const compact = variant === "compact"
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
   const [displayCount, setDisplayCount] = React.useState(batchSize)
@@ -154,15 +157,21 @@ function DataTable<TData, TValue>({
         className="flex-1 min-h-0 overflow-auto rounded-[var(--radius-card)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] [&_[data-slot=table-container]]:overflow-visible"
       >
 
-        <Table className="[&_th:first-child]:pl-4 [&_td:first-child]:pl-4">
-          <TableHeader className="sticky top-0 [z-index:var(--z-sticky)] bg-[var(--color-bg-base)]">
+        <Table className={cn(
+          "[&_th:first-child]:pl-4 [&_td:first-child]:pl-4",
+          compact && "[&_th]:h-7 [&_th]:text-caption [&_th]:text-[var(--color-text-default)] [&_td]:h-11 [&_td]:py-1.5 [&_td]:text-body-sm"
+        )}>
+          <TableHeader className={cn(
+            "sticky top-0 [z-index:var(--z-sticky)]",
+            "bg-[var(--color-bg-base)]"
+          )}>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header, index) => (
                   <TableHead key={header.id}>
                     {index === headerGroup.headers.length - 1 ? (
                       <div className="flex items-center justify-between gap-2">
-                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                        <span>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</span>
                         <DataTableColumnToggle table={table} />
                       </div>
                     ) : (

package/src/components/ui/dropdown-menu.tsx

@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "[z-index:var(--z-dropdown)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto [border-radius:var(--radius-popover)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] p-1 text-body-sm text-[var(--color-text-default)] shadow-[var(--shadow-popover)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "[z-index:var(--z-floating)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto [border-radius:var(--radius-popover)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] p-1 text-body-sm text-[var(--color-text-default)] shadow-[var(--shadow-popover)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className
         )}
         {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "[z-index:var(--z-dropdown)] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden [border-radius:var(--radius-popover)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] p-1 text-[var(--color-text-default)] shadow-[var(--shadow-popover)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "[z-index:var(--z-floating)] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden [border-radius:var(--radius-popover)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] p-1 text-[var(--color-text-default)] shadow-[var(--shadow-popover)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}

package/src/components/ui/filter-chip.tsx

@@ -52,7 +52,7 @@ function FilterChip(props: FilterChipProps) {
       {values.map((value, i) => (
         <span
           key={i}
-          className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-default)] px-2 py-0.5 text-caption text-[var(--color-text-default)]"
+          className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-default)] bg-[var(--color-bg-base)] px-2 py-0.5 text-caption text-[var(--color-text-default)]"
         >
           {value.label}
           <button

package/src/components/ui/filter-combobox.tsx

@@ -62,6 +62,7 @@ function FilterCombobox({
 
   const containerRef = React.useRef<HTMLDivElement>(null)
   const searchRef    = React.useRef<HTMLInputElement>(null)
+  const isSingle     = categories.length === 1
 
   // Close on outside click
   React.useEffect(() => {
@@ -91,6 +92,18 @@ function FilterCombobox({
     setAmountMax("")
   }
 
+  function handleToggle() {
+    if (open) {
+      handleClose()
+      return
+    }
+    // Single-category: skip step 1 and jump straight to options
+    if (isSingle) {
+      openCategory(categories[0])
+    }
+    setOpen(true)
+  }
+
   function openCategory(cat: FilterCategory) {
     const existing = activeFilters[cat.id] ?? []
 
@@ -193,8 +206,8 @@ function FilterCombobox({
 
   return (
     <div ref={containerRef} className={cn("relative inline-block", className)}>
-      {trigger ? trigger({ open, onClick: () => setOpen(v => !v) }) : (
-        <Button variant="default" size="sm" className="h-7 text-caption gap-1.5 px-2.5" onClick={() => setOpen(v => !v)}>
+      {trigger ? trigger({ open, onClick: handleToggle }) : (
+        <Button variant="default" size="sm" className="h-7 text-caption gap-1.5 px-2.5" onClick={handleToggle}>
           <PlusIcon className="size-3.5" />
           Add filter
         </Button>
@@ -204,11 +217,11 @@ function FilterCombobox({
         <div className={cn(
           dropdownAlign === "right" ? "absolute right-0 top-full mt-1.5 overflow-hidden [border-radius:var(--radius-popover)]" : "absolute left-0 top-full mt-1.5 overflow-hidden [border-radius:var(--radius-popover)]",
           "bg-[var(--color-bg-overlay)] shadow-[var(--shadow-popover)] ring-1 ring-[var(--color-border-subtle)]",
-          "[z-index:var(--z-dropdown)]",
+          "[z-index:var(--z-floating)]",
           step === 3 && isDate ? "w-auto" : "w-56"
         )}>
 
-          {/* Step 1 — category list */}
+          {/* Step 1 — category list (multi-category mode only) */}
           {step === 1 && (
             <ul className="p-1">
               {categories.map(cat => (
@@ -222,10 +235,12 @@ function FilterCombobox({
           {/* Step 2 — value list */}
           {step === 2 && selectedCategory && (
             <>
-              <StepHeader
-                title={selectedCategory.label}
-                onBack={() => { setStep(1); setSearch("") }}
-              />
+              {!isSingle && (
+                <StepHeader
+                  title={selectedCategory.label}
+                  onBack={() => { setStep(1); setSearch("") }}
+                />
+              )}
               {showSearch && (
                 <div className="px-1 pt-1">
                   <SearchInput ref={searchRef} value={search} onChange={setSearch} />
@@ -259,10 +274,12 @@ function FilterCombobox({
           {/* Step 3 — custom date range */}
           {step === 3 && isDate && (
             <>
-              <StepHeader
-                title={selectedCategory?.label ?? "Date"}
-                onBack={() => setStep(1)}
-              />
+              {!isSingle && (
+                <StepHeader
+                  title={selectedCategory?.label ?? "Date"}
+                  onBack={() => setStep(1)}
+                />
+              )}
               <div className="p-1">
                 <Calendar mode="range" selected={dateRange} onSelect={setDateRange} numberOfMonths={1} />
               </div>
@@ -276,14 +293,16 @@ function FilterCombobox({
             </>
           )}
 
-          {/* Step 3 — custom amount (no step 2 for amount — opens here directly) */}
+          {/* Step 3 — custom amount */}
           {step === 3 && isAmount && (
             <>
-              <StepHeader
-                title="Amount"
-                onBack={() => { setStep(1) }}
-              />
-              <div className="px-2 pb-2 flex flex-col gap-2">
+              {!isSingle && (
+                <StepHeader
+                  title="Amount"
+                  onBack={() => setStep(1)}
+                />
+              )}
+              <div className="p-2 flex flex-col gap-2">
                 <Tabs
                   value={amountMode}
                   onValueChange={v => setAmountMode(v as "exact" | "range")}

package/src/components/ui/search-bar.tsx

@@ -52,6 +52,7 @@ interface SearchBarProps {
   onRemoveFilter?: (categoryId: string, value: CategoryValue) => void
   onClearFilters?: () => void
   filterValueLabel?: (categoryId: string, value: CategoryValue) => string
+  alwaysShowFilterBar?: boolean
 
   children?: React.ReactNode
   className?: string
@@ -73,11 +74,13 @@ function SearchBar({
   onRemoveFilter,
   onClearFilters,
   filterValueLabel = defaultFilterValueLabel,
+  alwaysShowFilterBar = false,
   children,
   className,
 }: SearchBarProps) {
   const hasActiveFilters    = Object.values(activeFilters).some(v => v.length > 0)
   const hasFilterCategories = filterCategories.length > 0
+  const showFilterBar       = hasActiveFilters || alwaysShowFilterBar
 
   return (
     <div data-search-bar className={cn("relative flex flex-col", className)}>
@@ -86,7 +89,7 @@ function SearchBar({
       <InputGroup
         className={cn(
           "h-12",
-          hasActiveFilters && "[border-bottom-left-radius:0] [border-bottom-right-radius:0]"
+          showFilterBar && "[border-bottom-left-radius:0] [border-bottom-right-radius:0]"
         )}
       >
         <InputGroupAddon align="inline-start">
@@ -101,14 +104,15 @@ function SearchBar({
           onFocus={onFocus}
           autoComplete="off"
         />
-        {(!!value || (hasFilterCategories && !hasActiveFilters)) && (
+        {(!!value || (hasFilterCategories && !hasActiveFilters && !alwaysShowFilterBar) || (!value && !!kbdHint)) && (
           <InputGroupAddon align="inline-end">
             {value && (
               <InputGroupButton size="sm" variant="ghost" onClick={() => onChange("")} className="text-[var(--color-text-muted)] hover:text-[var(--color-text-default)]">
                 <XIcon className="size-4" />
               </InputGroupButton>
             )}
-            {hasFilterCategories && !hasActiveFilters && (
+            {!value && kbdHint && (!hasFilterCategories || alwaysShowFilterBar) && <Kbd>{kbdHint}</Kbd>}
+            {hasFilterCategories && !hasActiveFilters && !alwaysShowFilterBar && (
               <>
                 {!value && kbdHint && <Kbd>{kbdHint}</Kbd>}
                 <span className="h-4 w-px bg-[var(--color-border-default)]" />
@@ -129,41 +133,102 @@ function SearchBar({
         )}
       </InputGroup>
 
-      {/* Filter bar — visible only when filters are active */}
-      {hasActiveFilters && (
+      {/* Filter bar */}
+      {showFilterBar && (
         <div className="flex flex-wrap items-center gap-3 [border-bottom-left-radius:var(--radius-card)] [border-bottom-right-radius:var(--radius-card)] border border-t-0 border-[var(--color-border-default)] bg-[var(--color-bg-raised)] px-3 py-2.5">
-          {Object.entries(activeFilters)
-            .filter(([, vals]) => vals.length > 0)
-            .map(([categoryId, values]) => {
-              const cat = filterCategories.find(c => c.id === categoryId)
-              return (
+          {alwaysShowFilterBar ? (
+            // Always-open mode: one trigger per category, active ones show chips
+            <>
+              <span className="text-caption text-[var(--color-text-default)] shrink-0">Filters:</span>
+              {filterCategories.map(cat => {
+                const activeVals = activeFilters[cat.id] ?? []
+                const hasActive  = activeVals.length > 0
+
+                if (hasActive) {
+                  return (
+                    <FilterCombobox
+                      key={cat.id}
+                      categories={[cat]}
+                      onApply={onApplyFilter ?? (() => {})}
+                      activeFilters={activeFilters}
+                      trigger={({ onClick }) => (
+                        <FilterChip
+                          label={cat.label}
+                          values={activeVals.map(v => ({
+                            label: filterValueLabel(cat.id, v),
+                            onRemove: () => onRemoveFilter?.(cat.id, v),
+                          }))}
+                          onLabelClick={onClick}
+                        />
+                      )}
+                    />
+                  )
+                }
+
+                return (
+                  <FilterCombobox
+                    key={cat.id}
+                    categories={[cat]}
+                    onApply={onApplyFilter ?? (() => {})}
+                    activeFilters={activeFilters}
+                    trigger={({ onClick }) => (
+                      <button
+                        type="button"
+                        onClick={onClick}
+                        className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-default)] px-2 py-0.5 text-caption text-[var(--color-text-muted)] hover:text-[var(--color-text-default)] hover:border-[var(--color-border-hover,var(--color-border-default))] transition-colors"
+                      >
+                        {cat.label}
+                        <PlusIcon className="size-3 shrink-0" />
+                      </button>
+                    )}
+                  />
+                )
+              })}
+              {hasActiveFilters && (
                 <FilterChip
-                  key={categoryId}
-                  label={cat?.label ?? categoryId}
-                  values={values.map(v => ({
-                    label: filterValueLabel(categoryId, v),
-                    onRemove: () => onRemoveFilter?.(categoryId, v),
-                  }))}
-                  onLabelClick={() => {}}
+                  variant="clear-all"
+                  className="ml-auto"
+                  onClear={onClearFilters ?? (() => {})}
                 />
-              )
-            })}
-          <FilterCombobox
-            categories={filterCategories}
-            onApply={onApplyFilter ?? (() => {})}
-            activeFilters={activeFilters}
-            trigger={({ onClick }) => (
-              <Button variant="default" size="sm" className="h-7 text-caption gap-1.5 px-2.5" onClick={onClick}>
-                <PlusIcon className="size-3.5" />
-                Add
-              </Button>
-            )}
-          />
-          <FilterChip
-            variant="clear-all"
-            className="ml-auto"
-            onClear={onClearFilters ?? (() => {})}
-          />
+              )}
+            </>
+          ) : (
+            // Legacy mode: active chips + generic Add button
+            <>
+              {Object.entries(activeFilters)
+                .filter(([, vals]) => vals.length > 0)
+                .map(([categoryId, values]) => {
+                  const cat = filterCategories.find(c => c.id === categoryId)
+                  return (
+                    <FilterChip
+                      key={categoryId}
+                      label={cat?.label ?? categoryId}
+                      values={values.map(v => ({
+                        label: filterValueLabel(categoryId, v),
+                        onRemove: () => onRemoveFilter?.(categoryId, v),
+                      }))}
+                      onLabelClick={() => {}}
+                    />
+                  )
+                })}
+              <FilterCombobox
+                categories={filterCategories}
+                onApply={onApplyFilter ?? (() => {})}
+                activeFilters={activeFilters}
+                trigger={({ onClick }) => (
+                  <Button variant="default" size="sm" className="h-7 text-caption gap-1.5 px-2.5" onClick={onClick}>
+                    <PlusIcon className="size-3.5" />
+                    Add
+                  </Button>
+                )}
+              />
+              <FilterChip
+                variant="clear-all"
+                className="ml-auto"
+                onClear={onClearFilters ?? (() => {})}
+              />
+            </>
+          )}
         </div>
       )}
 

package/src/components/ui/select.tsx

@@ -69,7 +69,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "relative z-[var(--z-dropdown)] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto [border-radius:var(--radius-popover)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] text-[var(--color-text-default)] shadow-[var(--shadow-popover)]",
+          "relative z-[var(--z-floating)] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto [border-radius:var(--radius-popover)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] text-[var(--color-text-default)] shadow-[var(--shadow-popover)]",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",

package/src/components/ui/sonner.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { Toaster as Sonner, toast } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+function Toaster({ ...props }: ToasterProps) {
+  return (
+    <Sonner
+      className="toaster group"
+      style={
+        {
+          "--normal-bg":     "var(--primitive-neutral-950)",
+          "--normal-text":   "var(--primitive-neutral-50)",
+          "--normal-border": "var(--primitive-neutral-900)",
+
+          "--success-bg":     "var(--primitive-neutral-950)",
+          "--success-text":   "var(--primitive-green-400)",
+          "--success-border": "var(--primitive-neutral-900)",
+
+          "--error-bg":     "var(--primitive-neutral-950)",
+          "--error-text":   "var(--primitive-red-400)",
+          "--error-border": "var(--primitive-neutral-900)",
+
+          "--warning-bg":     "var(--primitive-neutral-950)",
+          "--warning-text":   "var(--primitive-yellow-300)",
+          "--warning-border": "var(--primitive-neutral-900)",
+
+          "--info-bg":     "var(--primitive-neutral-950)",
+          "--info-text":   "var(--primitive-blue-400)",
+          "--info-border": "var(--primitive-neutral-900)",
+
+          "--border-radius": "var(--radius-card)",
+          "--font":          "inherit",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast:       "!items-start",
+          icon:        "mt-0.5",
+          title:       "text-label !text-[var(--primitive-neutral-50)]",
+          description: "text-body-sm !text-[var(--primitive-neutral-300)]",
+          success:     "[&_[data-icon]]:text-[var(--primitive-green-400)]",
+          error:       "[&_[data-icon]]:text-[var(--primitive-red-400)]",
+          warning:     "[&_[data-icon]]:text-[var(--primitive-yellow-300)]",
+          info:        "[&_[data-icon]]:text-[var(--primitive-neutral-50)]",
+        },
+        actionButtonStyle: {
+          height:       "2rem",
+          padding:      "0 0.75rem",
+          borderRadius: "var(--radius-button)",
+          border:       "1px solid var(--primitive-neutral-700)",
+          background:   "var(--primitive-neutral-800)",
+          color:        "var(--primitive-neutral-50)",
+          fontSize:     "0.875rem",
+          fontWeight:   "600",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster, toast }

package/src/components/ui/tabs.tsx

@@ -30,7 +30,7 @@ const tabsListVariants = cva(
   {
     variants: {
       variant: {
-        default: "[border-radius:var(--radius-card)] bg-[var(--color-bg-disabled)]",
+        default: "[border-radius:var(--radius-card)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] shadow-xs",
         line:    "gap-1 rounded-none bg-transparent",
       },
     },
@@ -71,7 +71,7 @@ function TabsTrigger({
         "focus-visible:border-[var(--color-border-focus)] focus-visible:ring-[3px] focus-visible:ring-[var(--color-border-focus)]/50",
         "disabled:pointer-events-none disabled:text-[var(--color-text-disabled)]",
         // default variant — active tab gets raised surface
-        "group-data-[variant=default]/tabs-list:data-[state=active]:bg-[var(--color-bg-raised)] group-data-[variant=default]/tabs-list:data-[state=active]:text-[var(--color-text-default)] group-data-[variant=default]/tabs-list:data-[state=active]:shadow-[var(--shadow-card)]",
+        "group-data-[variant=default]/tabs-list:data-[state=active]:bg-[var(--color-bg-inverted)] group-data-[variant=default]/tabs-list:data-[state=active]:text-[var(--color-bg-raised)] group-data-[variant=default]/tabs-list:data-[state=active]:shadow-[var(--shadow-card)]",
         // line variant — active tab is transparent, underline indicator
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:text-[var(--color-text-default)] group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
         // underline indicator for line variant

package/src/components/ui/tooltip.tsx

@@ -54,4 +54,30 @@ function TooltipContent({
   )
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+function TooltipLabel({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="tooltip-label"
+      className={cn("text-caption text-[var(--color-text-inverse)]", className)}
+      {...props}
+    />
+  )
+}
+
+function TooltipDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="tooltip-description"
+      className={cn("text-caption text-[var(--color-text-inverse-muted)]", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipLabel, TooltipDescription }

package/src/index.ts

@@ -27,6 +27,7 @@ export * from "./components/ui/kbd"
 export * from "./components/ui/label"
 export * from "./components/ui/pagination"
 export * from "./components/ui/select"
+export * from "./components/ui/sonner"
 export * from "./components/ui/separator"
 export * from "./components/ui/sheet"
 export * from "./components/ui/sidebar"

package/tokens/gradients.css

@@ -0,0 +1,13 @@
+/*
+ * Gradient tokens — semantic gradient expressions.
+ * Import after primitives.css. References semantic tokens (e.g. --color-bg-canvas)
+ * which are resolved at paint time, so import order with app globals doesn't matter.
+ */
+
+:root {
+  --gradient-page: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-base) 20%, var(--primitive-neutral-0) 100%);
+}
+
+.dark {
+  --gradient-page: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-base) 20%, var(--primitive-neutral-800) 100%);
+}

package/tokens/primitives.css

@@ -22,6 +22,18 @@
 
   /* --- Color scales --- */
 
+  --primitive-beige-50:  oklch(0.990 0.008 98);
+  --primitive-beige-100: oklch(0.982 0.030 98);
+  --primitive-beige-200: oklch(0.968 0.052 98);
+  --primitive-beige-300: oklch(0.948 0.072 98);
+  --primitive-beige-400: oklch(0.918 0.083 98);
+  --primitive-beige-500: oklch(0.876 0.085 98);
+  --primitive-beige-600: oklch(0.792 0.076 98);
+  --primitive-beige-700: oklch(0.680 0.062 98);
+  --primitive-beige-800: oklch(0.480 0.044 98);
+  --primitive-beige-900: oklch(0.310 0.028 98);
+  --primitive-beige-950: oklch(0.230 0.020 98);
+
   --primitive-red-50:  oklch(0.95 0.03 28);
   --primitive-red-100: oklch(0.93 0.05 28);
   --primitive-red-200: oklch(0.89 0.07 28);
@@ -58,9 +70,9 @@
   --primitive-yellow-900: oklch(0.3 0.07 98);
   --primitive-yellow-950: oklch(0.25 0.06 98);
 
-  --primitive-lulo-50:  oklch(0.94 0.24 112);
-  --primitive-lulo-100: oklch(0.92 0.23 112);
-  --primitive-lulo-200: oklch(0.87 0.22 112);
+  --primitive-lulo-50:  oklch(0.967 0.099 118);
+  --primitive-lulo-100: oklch(0.918 0.136 116);
+  --primitive-lulo-200: oklch(0.869 0.173 114);
   --primitive-lulo-300: oklch(0.82 0.21 112);
   --primitive-lulo-400: oklch(0.76 0.2 112);
   --primitive-lulo-500: oklch(0.7 0.18 112);
@@ -106,6 +118,18 @@
   --primitive-sea-900: oklch(0.29 0.07 220);
   --primitive-sea-950: oklch(0.24 0.06 220);
 
+  --primitive-slate-50:  oklch(0.950 0.012 218);
+  --primitive-slate-100: oklch(0.932 0.020 218);
+  --primitive-slate-200: oklch(0.898 0.032 218);
+  --primitive-slate-300: oklch(0.848 0.042 218);
+  --primitive-slate-400: oklch(0.762 0.054 218);
+  --primitive-slate-500: oklch(0.656 0.063 218);
+  --primitive-slate-600: oklch(0.560 0.054 218);
+  --primitive-slate-700: oklch(0.472 0.046 218);
+  --primitive-slate-800: oklch(0.352 0.034 218);
+  --primitive-slate-900: oklch(0.248 0.023 218);
+  --primitive-slate-950: oklch(0.198 0.017 218);
+
   --primitive-blue-50:  oklch(0.95 0.03 257);
   --primitive-blue-100: oklch(0.93 0.04 257);
   --primitive-blue-200: oklch(0.88 0.06 257);
@@ -222,7 +246,8 @@
   --primitive-z-raised:    10;
   --primitive-z-dropdown:  20;
   --primitive-z-overlay:   100;
-  --primitive-z-modal:   200;
-  --primitive-z-toast:   300;
+  --primitive-z-modal:    200;
+  --primitive-z-floating: 210;
+  --primitive-z-toast:    300;
   --primitive-z-tooltip: 400;
 }