@godxjp/ui 8.2.0 → 9.0.0

package/dist/index.js

@@ -1,56 +1,61 @@
-import './chunk-Q7AU6WDX.js';
+import './chunk-WFUIE252.js';
+import './chunk-BHV2FUOA.js';
+import './chunk-RSC5K7RP.js';
 import './chunk-FYM3MJSK.js';
-import './chunk-25RYBC5T.js';
 import './chunk-R2W2FX5Q.js';
 import './chunk-EOTOCNT7.js';
-import './chunk-RGPF3HU6.js';
+import './chunk-QLMXEJSY.js';
+import './chunk-6YBYAEXD.js';
+import './chunk-LJLGABFV.js';
+import './chunk-N3JPLJ3B.js';
+import './chunk-25RYBC5T.js';
+import './chunk-JOLM73YQ.js';
+import './chunk-IOGU3ZWF.js';
 import './chunk-3TS3G4U3.js';
-import './chunk-67HEX3OS.js';
-import './chunk-IAKROVSG.js';
-import './chunk-WFUIE252.js';
-import './chunk-BHV2FUOA.js';
-import './chunk-MISVV4IT.js';
-import './chunk-7577VIAC.js';
-export { FormFieldControl, FormRoot, useZodForm } from './chunk-7WRZG2IG.js';
-import './chunk-HKD6ERY7.js';
-export { PageContainer, Stack } from './chunk-YXJ3FS6O.js';
-import './chunk-FRU44GA2.js';
-export { FilterBar, FilterGroup, PageHeader, Toolbar, ToolbarGroup } from './chunk-PZ4LO723.js';
-import './chunk-TO33OY4L.js';
-export { Pagination } from './chunk-V45EK6S7.js';
+import './chunk-JKHWLPM5.js';
+import './chunk-LDSLS6HE.js';
+export { FilterBar, FilterGroup, PageHeader, Toolbar, ToolbarGroup } from './chunk-32ZUUKML.js';
+import './chunk-B73NA66T.js';
+import './chunk-WGWI7EGL.js';
+export { Pagination } from './chunk-TBXQJCBQ.js';
 export { Steps } from './chunk-OJZ6C2HM.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './chunk-V3N266PT.js';
-export { AlertMutationFeedback, ButtonRefetch, DataState, InfiniteQueryState, MutationFeedback, PrefetchLink, QueryRefetchButton, flattenItemPages } from './chunk-N43OKOFT.js';
-export { Upload, collectUploadCommitActions, createUploadItem, useUploadDraft } from './chunk-NGT3I6OG.js';
-import './chunk-3EMDVI7X.js';
-import './chunk-CRERCLIZ.js';
-export { SearchInput, Transfer, useDebouncedValue, useTimeoutFlag } from './chunk-3FUXNL5A.js';
-export { TreeSelect } from './chunk-TV7WEENM.js';
 export { toast, useToast } from './chunk-B3WX53JQ.js';
 export { SkeletonCard, SkeletonDetail, SkeletonRows, SkeletonStat, SkeletonTable } from './chunk-AINW5WYN.js';
+export { Alert, AlertActions, AlertContent, AlertDescription, AlertQueryError, AlertTitle } from './chunk-ZRRLOOBX.js';
+export { Toaster } from './chunk-TO7URV7U.js';
+export { PageContainer, Stack } from './chunk-442ULAA6.js';
+import './chunk-FRU44GA2.js';
+import './chunk-TO33OY4L.js';
 import './chunk-32WO3YLB.js';
-export { Alert, AlertActions, AlertContent, AlertDescription, AlertQueryError, AlertTitle } from './chunk-TMDGV4CN.js';
+import './chunk-W4REF4TD.js';
+import './chunk-HL3G4SVG.js';
+export { SearchInput, Transfer } from './chunk-INSF6K3Y.js';
+export { TreeSelect } from './chunk-6J7GRCDA.js';
+export { Upload, collectUploadCommitActions, createUploadItem, useUploadDraft } from './chunk-Z6HNY2PL.js';
 export { formatBytes, formatCurrency, formatDateLong, formatDateTime, formatRelative, humanError, shortId } from './chunk-4R7QL3MW.js';
 export { AlertDialog, Dialog, DialogConfirm, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from './chunk-P4HFJQID.js';
-export { Toaster } from './chunk-TO7URV7U.js';
-import './chunk-WY4RSEYC.js';
-import './chunk-VOHTRR5X.js';
-export { Cascader } from './chunk-PKGPNZA4.js';
+import './chunk-CRERCLIZ.js';
+import './chunk-2ACNEQOI.js';
+import './chunk-GKED65NV.js';
+export { Cascader } from './chunk-HB2OHB5X.js';
 import './chunk-SMLKNECP.js';
 import './chunk-O24Z3ULJ.js';
 export { ChoiceField, Field } from './chunk-26CPAKUP.js';
+import './chunk-VOHTRR5X.js';
 import './chunk-HTEL5DQI.js';
-export { DataTable, Descriptions, EmptyState } from './chunk-N5SDFNSJ.js';
+export { DataTable, Descriptions, EmptyState } from './chunk-JBHXILI4.js';
 import './chunk-DV52WNXO.js';
 export { Flex, Inline } from './chunk-TILFZBTE.js';
+import './chunk-M4PZNAMV.js';
 export { Badge } from './chunk-UIYEAUWA.js';
 import './chunk-DY5C44UP.js';
 import './chunk-3KPEZ5CF.js';
 import './chunk-4MMIMZMK.js';
 import './chunk-IBK5D2Q6.js';
-import './chunk-M4PZNAMV.js';
 export { FormField } from './chunk-F7PG4OEV.js';
 import './chunk-7PWBC4BY.js';
 import './chunk-RLGHEV4A.js';
 export { formatDate } from './chunk-FXFJF4YA.js';
+export { useDebouncedValue, useTimeoutFlag } from './chunk-LFW37FGG.js';
 export { cn } from './chunk-U7N2A7A3.js';

package/dist/{inline-DqfYlGKj.d.ts → inline-DCqn4O29.d.ts}

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PageContainerProp, e as PageInsetProp, c as FlexProp, i as StackProp, I as InlineProp } from './layout.prop-Baq9muDN.js';
+import { P as PageContainerProp, e as PageInsetProp, c as FlexProp, i as StackProp, I as InlineProp } from './layout.prop-DwJKI6ka.js';
 
 declare function PageContainerInset({ className, children, ...props }: PageInsetProp): react_jsx_runtime.JSX.Element;
-declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, density, variant, stickyFooter, children, className, }: PageContainerProp): react_jsx_runtime.JSX.Element;
+declare function PageContainerRoot({ title, subtitle, extra, footer, breadcrumb, linkComponent: LinkComponent, density, variant, stickyFooter, children, className, }: PageContainerProp): react_jsx_runtime.JSX.Element;
 declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/{layout.prop-Baq9muDN.d.ts → layout.prop-DwJKI6ka.d.ts}

@@ -14,6 +14,7 @@ type PageContainerProp = {
     extra?: ExtraProp;
     footer?: FooterProp;
     breadcrumb?: BreadcrumbProp;
+    linkComponent?: React.ElementType;
     density?: PageDensityProp;
     variant?: PageContainerVariantProp;
     /** Pin footer to viewport bottom on scroll — pairs well with `variant="narrow"`. */
@@ -127,6 +128,7 @@ type PageHeaderProp = {
     title: TitleProp;
     description?: SubtitleProp;
     breadcrumb?: BreadcrumbProp;
+    linkComponent?: React.ElementType;
     actions?: ExtraProp;
     className?: ClassNameProp;
 };

package/dist/lib/hooks.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Returns a debounced view of `value`, updated only after `delay` ms of no
+ * change. Use for search inputs to avoid querying on every keystroke.
+ *
+ * setState runs only inside setTimeout (async) — compliant with
+ * react-hooks/set-state-in-effect.
+ */
+declare function useDebouncedValue<T>(value: T, delay?: number): T;
+/**
+ * Returns true while `ms` haven't elapsed since `signal` last flipped truthy.
+ * setState is scheduled asynchronously (setTimeout 0 / ms) — Rules of React safe.
+ */
+declare function useTimeoutFlag(signal: unknown, ms?: number): boolean;
+declare function useMediaQuery(query: string): boolean;
+declare function useIsMobile(): boolean;
+
+export { useDebouncedValue, useIsMobile, useMediaQuery, useTimeoutFlag };

package/dist/lib/hooks.js

@@ -0,0 +1 @@
+export { useDebouncedValue, useIsMobile, useMediaQuery, useTimeoutFlag } from '../chunk-LFW37FGG.js';

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

@@ -1,9 +1,9 @@
-export { A as AppShellProp, I as InlineProp, P as PageContainerProp, d as PageHeaderProp, e as PageInsetProp, S as SidebarItemProp, f as SidebarProductProp, g as SidebarProp, h as SidebarSectionProp, i as StackProp, T as TopbarProductProp, j as TopbarProjectProp, k as TopbarProp } from '../../layout.prop-Baq9muDN.js';
+export { A as AppShellProp, I as InlineProp, P as PageContainerProp, d as PageHeaderProp, e as PageInsetProp, S as SidebarItemProp, f as SidebarProductProp, g as SidebarProp, h as SidebarSectionProp, i as StackProp, T as TopbarProductProp, j as TopbarProjectProp, k as TopbarProp } from '../../layout.prop-DwJKI6ka.js';
 export { B as ButtonProp } from '../../general.prop-DoHDCRmL.js';
 export { A as AutocompleteOptionProp, a as AutocompleteProp, C as CalendarProp, b as CascaderProp, c as CheckboxGroupProp, d as CheckboxProp, f as ChoiceOptionProp, g as ColorPickerProp, D as DatePickerProp, k as DateRangePickerProp, l as FormFieldProp, I as InputProp, R as RadioGroupProp, m as RadioProp, S as SearchInputProp, s as ShowCheckedStrategyProp, t as SliderProp, u as SwitchProp, T as TextareaProp, v as TimePickerProp, w as TransferItemProp, x as TransferProp, y as TreeFieldNamesProp, z as TreeOptionProp, B as TreeSelectProp, G as UploadFileItemProp, H as UploadProp, K as UploadVariantProp } from '../../data-entry.prop-CDkOajPj.js';
 export { B as BadgeProp, D as DataTableProp, a as DescriptionsItemProp, b as DescriptionsProp, E as EmptyStateProp } from '../../data-display.prop-Cf2p9QC4.js';
 export { A as AlertActionsProp, a as AlertContentProp, b as AlertDescriptionProp, d as AlertProp, e as AlertQueryErrorProp, f as AlertTitleProp, D as DialogConfirmProp, S as SkeletonRowsProp } from '../../feedback.prop-BR5JOpPl.js';
-export { D as DataStateProp, I as InfiniteQueryHelpers, a as InfiniteQueryStateProp, M as MutationFeedbackProp, P as PrefetchLinkProp, Q as QueryRefetchButtonProp } from '../../query.prop-DuODxsiU.js';
+export { D as DataStateProp, I as InfiniteQueryHelpers, a as InfiniteQueryStateProp, M as MutationFeedbackProp, P as PrefetchLinkProp, Q as QueryRefetchButtonProp } from '../../query.prop-BDdz9L1G.js';
 export { F as FilterBarProp, a as FilterGroupProp, P as PaginationProp, S as StepItemProp, b as StepStatusProp, c as StepsProp, T as TabItemProp, d as TabsProp } from '../../navigation.prop-8DgElO0c.js';
 export { A as AppContextValue, a as AppProviderProp, D as DateFormatPickerProp, L as LocalePickerProp, T as TimeFormatPickerProp, b as TimezonePickerProp } from '../../app.prop-DnIXFzLi.js';
 export { F as FieldErrorMessageProp, a as FormFieldControlProp, b as FormRootProp, U as UseZodFormOptionsProp, c as UseZodFormReturnProp, Z as ZodSchemaProp } from '../../form.prop-Bc6r6JJW.js';

package/dist/props/index.d.ts

@@ -4,12 +4,12 @@ export { D as DensityProp, G as GapProp, P as PageContainerVariantProp, a as Pag
 export { A as AlertVariantProp, B as ButtonSizeProp, a as ButtonVariantProp, C as ColumnAlignProp, b as ConfirmVariantProp, S as SizeProp, c as SortDirectionProp, d as SortStateProp, T as ToneProp } from '../interaction.prop-DSFizzP6.js';
 export { B as BreadcrumbItem, B as BreadcrumbItemProp, a as BreadcrumbProp } from '../navigation.prop-BKlxd-j7.js';
 export { C as ColumnDef, C as ColumnDefProp, G as GetRowIdProp, H as HasActiveFiltersProp, O as OnClearFiltersProp, a as OnRowClickProp, b as OnSearchChangeProp, c as OnSelectChangeProp, d as OnSortChangeProp, e as OnTableDensityChangeProp, S as SelectedIdsProp } from '../data.prop-DMYMNl6L.js';
-export { A as AppShellProp, I as InlineProp, I as InlineProps, P as PageContainerProp, P as PageContainerProps, d as PageHeaderProp, e as PageInsetProp, S as SidebarItemProp, f as SidebarProductProp, g as SidebarProp, h as SidebarSectionProp, i as StackProp, i as StackProps, T as TopbarProductProp, j as TopbarProjectProp, k as TopbarProp } from '../layout.prop-Baq9muDN.js';
+export { A as AppShellProp, I as InlineProp, I as InlineProps, P as PageContainerProp, P as PageContainerProps, d as PageHeaderProp, e as PageInsetProp, S as SidebarItemProp, f as SidebarProductProp, g as SidebarProp, h as SidebarSectionProp, i as StackProp, i as StackProps, T as TopbarProductProp, j as TopbarProjectProp, k as TopbarProp } from '../layout.prop-DwJKI6ka.js';
 export { B as ButtonProp, B as ButtonProps } from '../general.prop-DoHDCRmL.js';
 export { A as AutocompleteOptionProp, a as AutocompleteProp, C as CalendarProp, b as CascaderProp, c as CheckboxGroupProp, d as CheckboxProp, f as ChoiceOptionProp, g as ColorPickerProp, D as DatePickerProp, k as DateRangePickerProp, l as FormFieldProp, I as InputProp, R as RadioGroupProp, m as RadioProp, S as SearchInputProp, s as ShowCheckedStrategyProp, t as SliderProp, u as SwitchProp, T as TextareaProp, v as TimePickerProp, w as TransferItemProp, x as TransferProp, y as TreeFieldNamesProp, z as TreeOptionProp, B as TreeSelectProp, G as UploadFileItemProp, H as UploadProp, K as UploadVariantProp } from '../data-entry.prop-CDkOajPj.js';
 export { B as BadgeProp, D as DataTableProp, a as DescriptionsItemProp, b as DescriptionsProp, E as EmptyStateProp } from '../data-display.prop-Cf2p9QC4.js';
 export { A as AlertActionsProp, a as AlertContentProp, b as AlertDescriptionProp, d as AlertProp, e as AlertQueryErrorProp, f as AlertTitleProp, D as DialogConfirmProp, S as SkeletonRowsProp } from '../feedback.prop-BR5JOpPl.js';
-export { D as DataStateProp, I as InfiniteQueryHelpers, a as InfiniteQueryStateProp, M as MutationFeedbackProp, P as PrefetchLinkProp, Q as QueryRefetchButtonProp } from '../query.prop-DuODxsiU.js';
+export { D as DataStateProp, I as InfiniteQueryHelpers, a as InfiniteQueryStateProp, M as MutationFeedbackProp, P as PrefetchLinkProp, Q as QueryRefetchButtonProp } from '../query.prop-BDdz9L1G.js';
 export { F as FilterBarProp, a as FilterGroupProp, P as PaginationProp, S as StepItemProp, b as StepStatusProp, c as StepsProp, T as TabItemProp, d as TabsProp } from '../navigation.prop-8DgElO0c.js';
 export { A as AppContextValue, a as AppProviderProp, D as DateFormatPickerProp, L as LocalePickerProp, T as TimeFormatPickerProp, b as TimezonePickerProp } from '../app.prop-DnIXFzLi.js';
 export { F as FieldErrorMessageProp, a as FormFieldControlProp, b as FormRootProp, U as UseZodFormOptionsProp, c as UseZodFormReturnProp, Z as ZodSchemaProp } from '../form.prop-Bc6r6JJW.js';

package/dist/props/index.js

@@ -1,3 +1,3 @@
 import '../chunk-B775Y6BE.js';
 import '../chunk-ZT5UEUBO.js';
-export { COMPONENT_PROP_REGISTRY, PROP_ALIASES_FORBIDDEN, VOCABULARY_REGISTRY } from '../chunk-C5H655GK.js';
+export { COMPONENT_PROP_REGISTRY, PROP_ALIASES_FORBIDDEN, VOCABULARY_REGISTRY } from '../chunk-6PA2YHRE.js';

package/dist/props/registry.js

@@ -1 +1 @@
-export { COMPONENT_PROP_REGISTRY, PROP_ALIASES_FORBIDDEN, VOCABULARY_REGISTRY } from '../chunk-C5H655GK.js';
+export { COMPONENT_PROP_REGISTRY, PROP_ALIASES_FORBIDDEN, VOCABULARY_REGISTRY } from '../chunk-6PA2YHRE.js';

package/dist/{query.prop-DuODxsiU.d.ts → query.prop-BDdz9L1G.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { UseMutationResult, UseQueryResult, UseInfiniteQueryResult, InfiniteData, QueryKey } from '@tanstack/react-query';
+import { UseQueryResult, UseInfiniteQueryResult, InfiniteData, UseMutationResult, QueryKey } from '@tanstack/react-query';
 import { LinkProps } from 'react-router-dom';
 import { B as ButtonProp } from './general.prop-DoHDCRmL.js';
 import { H as HandlerProp, a as ClassNameProp } from './shared.prop-BsNSXeqD.js';

package/dist/styles/data-display-layout.css

@@ -211,3 +211,58 @@
   color: hsl(var(--popover-foreground)); padding: var(--space-4);
   box-shadow: var(--shadow-md); outline: none;
 }
+
+.ui-carousel {
+  position: relative;
+}
+
+.ui-carousel-viewport {
+  overflow: hidden;
+}
+
+.ui-carousel-content {
+  display: flex;
+  margin-inline: calc(var(--space-4) * -1);
+}
+
+.ui-carousel-item {
+  position: relative;
+  min-width: 100%;
+  padding-inline: var(--space-4);
+}
+
+.ui-carousel-previous,
+.ui-carousel-next {
+  position: absolute;
+  top: 50%;
+  z-index: 20;
+  display: grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border-radius: 9999px;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  color: hsl(var(--foreground));
+  transition: background-color 150ms ease;
+  transform: translateY(-50%);
+}
+
+.ui-carousel-previous {
+  left: var(--space-2);
+}
+
+.ui-carousel-next {
+  right: var(--space-2);
+}
+
+.ui-carousel-previous:hover,
+.ui-carousel-next:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.ui-carousel-arrow {
+  width: 1rem;
+  height: 1rem;
+}

package/dist/styles/data-entry-layout.css

@@ -0,0 +1,93 @@
+@layer components {
+  .ui-combobox-content {
+    min-width: 14rem;
+    width: min(22rem, 90vw);
+    padding: 0;
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+  }
+
+  .ui-combobox-command {
+    width: 100%;
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+  }
+
+  .ui-combobox-search {
+    border: none;
+    border-radius: 0;
+    width: 100%;
+  }
+
+  .ui-combobox-list {
+    min-height: 0;
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-1);
+  }
+
+  .ui-combobox-item {
+    position: relative;
+    width: 100%;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    border-radius: var(--radius-sm);
+    padding-inline: var(--space-2);
+    padding-block: var(--space-2);
+    font-size: var(--font-size-sm);
+    outline: none;
+  }
+
+  .ui-combobox-item[data-selected="true"] {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-combobox-item:hover,
+  .ui-combobox-item[data-state="active"] {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-combobox-empty {
+    display: block;
+    padding: var(--space-3);
+    text-align: center;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-combobox-caret {
+    width: 0.9rem;
+    height: 0.9rem;
+    border-bottom: 1px solid currentColor;
+    border-right: 1px solid currentColor;
+    transform: rotate(45deg);
+    margin-left: auto;
+    opacity: 0.7;
+  }
+
+  .ui-time-input {
+    width: 100%;
+    min-height: var(--control-height);
+    border-radius: var(--radius-md);
+    border: 1px solid hsl(var(--input));
+    background: hsl(var(--background));
+    padding-inline: var(--space-3);
+    padding-block: 0;
+    font-size: var(--font-size-sm);
+    color: hsl(var(--foreground));
+    outline: none;
+  }
+
+  .ui-time-input:focus-visible {
+    border-color: hsl(var(--ring));
+    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3);
+  }
+
+  .ui-time-input[aria-invalid="true"] {
+    border-color: hsl(var(--destructive));
+  }
+}

package/dist/styles/index.css

@@ -18,6 +18,8 @@
 @import "./alert-layout.css";
 @import "./badge-layout.css";
 @import "./data-display-layout.css";
+@import "./data-entry-layout.css";
+@import "./navigation-layout.css";
 
 @theme {
   --color-background: hsl(var(--background));

package/dist/styles/layout.css

@@ -173,9 +173,9 @@
   }
 
   @container (min-width: 1024px) {
-    .ui-responsive-grid {
-      grid-template-columns: repeat(var(--responsive-grid-lg, 4), minmax(0, 1fr));
-    }
+  .ui-responsive-grid {
+    grid-template-columns: repeat(var(--responsive-grid-lg, 4), minmax(0, 1fr));
+  }
   }
 
   .ui-split-pane {
@@ -184,6 +184,38 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .ui-resizable-panel-group {
+    display: flex;
+    min-height: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .ui-resizable-panel {
+    min-height: 0;
+    min-width: 0;
+  }
+
+  .ui-resizable-handle {
+    width: var(--control-border-width);
+    background: hsl(var(--border));
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .ui-resizable-handle:hover,
+  .ui-resizable-handle[data-state="drag"] {
+    background: hsl(var(--accent));
+  }
+
+  .ui-resizable-handle:hover::after,
+  .ui-resizable-handle[data-state="drag"]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: hsl(var(--accent-foreground) / 0.2);
+  }
+
   @media (min-width: 1080px) {
     .ui-split-pane[data-aside-width="sm"] {
       grid-template-columns: minmax(0, 1fr) 20rem;

package/dist/styles/navigation-layout.css

@@ -0,0 +1,271 @@
+@layer components {
+  .ui-context-menu-content {
+    z-index: 50;
+    min-width: 10rem;
+    overflow: hidden;
+    border-radius: var(--radius-md);
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    padding: var(--space-1);
+    box-shadow: var(--shadow-md);
+  }
+
+  .ui-context-menu-item,
+  .ui-context-menu-label,
+  .ui-context-menu-sub-trigger,
+  .ui-context-menu-checkbox-item,
+  .ui-context-menu-radio-item,
+  .ui-context-menu-shortcut,
+  .ui-context-menu-content > div,
+  .ui-menubar-item,
+  .ui-menubar-label,
+  .ui-menubar-trigger,
+  .ui-menubar-sub-trigger,
+  .ui-menubar-checkbox-item,
+  .ui-menubar-radio-item {
+    border-radius: var(--radius-sm);
+    padding-inline: var(--space-2);
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--font-size-sm);
+  }
+
+  .ui-context-menu-item,
+  .ui-context-menu-checkbox-item,
+  .ui-context-menu-radio-item,
+  .ui-context-menu-sub-trigger,
+  .ui-menubar-item,
+  .ui-menubar-checkbox-item,
+  .ui-menubar-radio-item,
+  .ui-menubar-sub-trigger,
+  .ui-navigation-menu-link {
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+    transition: background-color 150ms ease, color 150ms ease;
+  }
+
+  .ui-context-menu-item:hover,
+  .ui-context-menu-sub-trigger:hover,
+  .ui-menubar-item:hover,
+  .ui-menubar-sub-trigger:hover,
+  .ui-navigation-menu-link:hover,
+  .ui-navigation-menu-item:hover {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-context-menu-item[data-state="open"],
+  .ui-context-menu-item[data-state="checked"],
+  .ui-context-menu-item[data-highlighted],
+  .ui-menubar-item[data-state="open"],
+  .ui-menubar-item[data-state="active"],
+  .ui-menubar-item[data-state="checked"],
+  .ui-menubar-sub-trigger[data-state="open"],
+  .ui-navigation-menu-link[data-highlighted],
+  .ui-navigation-menu-item[data-focus-visible] {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-context-menu-item[data-variant="destructive"],
+  .ui-menubar-item[data-variant="destructive"] {
+    color: hsl(var(--destructive));
+  }
+
+  .ui-context-menu-item[data-variant="destructive"][data-state="focused"],
+  .ui-menubar-item[data-variant="destructive"][data-state="focused"] {
+    background: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+  }
+
+  .ui-context-menu-separator,
+  .ui-menubar-separator {
+    margin: var(--space-1) 0;
+    height: 1px;
+    background: hsl(var(--border));
+  }
+
+  .ui-context-menu-label,
+  .ui-menubar-label {
+    min-height: 2rem;
+    color: hsl(var(--muted-foreground));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-context-menu-shortcut,
+  .ui-menubar-shortcut {
+    margin-inline-start: auto;
+    text-align: right;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-xs);
+  }
+
+  .ui-context-menu-item-indicator,
+  .ui-menubar-item-indicator,
+  .ui-navigation-menu-item-indicator {
+    display: inline-flex;
+    width: 1rem;
+    height: 1rem;
+    align-items: center;
+    justify-content: center;
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-context-menu-check,
+  .ui-menubar-check {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .ui-context-menu-dot,
+  .ui-menubar-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background: currentColor;
+  }
+
+  .ui-context-menu-sub-content,
+  .ui-context-menu-sub-trigger,
+  .ui-menubar-sub-content,
+  .ui-menubar-sub-trigger {
+    position: relative;
+  }
+
+  .ui-context-menu-sub-content,
+  .ui-menubar-sub-content {
+    min-width: 10rem;
+    overflow: hidden;
+    border-radius: var(--radius-md);
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    padding: var(--space-1);
+    box-shadow: var(--shadow-md);
+  }
+
+  .ui-context-menu-sub-trigger-icon,
+  .ui-menubar-sub-trigger-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-left: auto;
+    opacity: 0.75;
+  }
+
+  .ui-menubar {
+    display: flex;
+    min-height: 2.25rem;
+    align-items: center;
+    gap: var(--space-1);
+    border-radius: var(--radius-md);
+  }
+
+  .ui-menubar-trigger {
+    height: 2.25rem;
+    padding: 0 var(--space-3);
+    border-radius: var(--radius-md);
+  }
+
+  .ui-menubar-content {
+    min-width: 10rem;
+    overflow: hidden;
+    border-radius: var(--radius-md);
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    padding: var(--space-1);
+    box-shadow: var(--shadow-md);
+  }
+
+  .ui-menubar-trigger[data-state="open"],
+  .ui-menubar-sub-trigger[data-state="open"] {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-navigation-menu {
+    position: relative;
+    width: max-content;
+  }
+
+  .ui-navigation-menu-list {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+
+  .ui-navigation-menu-item,
+  .ui-navigation-menu-trigger {
+    position: relative;
+    cursor: pointer;
+    border-radius: var(--radius-md);
+    padding-inline: var(--space-2);
+    padding-block: var(--space-2);
+    height: 2.25rem;
+    font-size: var(--font-size-sm);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    outline: none;
+  }
+
+  .ui-navigation-menu-trigger-icon {
+    width: 0.9rem;
+    height: 0.9rem;
+    margin-left: var(--space-2);
+    opacity: 0.7;
+  }
+
+  .ui-navigation-menu-content {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 14rem;
+    z-index: 50;
+    overflow: hidden;
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius-md);
+    background: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    padding: var(--space-1);
+    box-shadow: var(--shadow-md);
+  }
+
+  .ui-navigation-menu-link {
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .ui-navigation-menu-viewport {
+    position: absolute;
+    left: 0;
+    top: 100%;
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-md);
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+  }
+
+  .ui-navigation-menu-indicator {
+    position: absolute;
+    top: 100%;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 0.75rem;
+    overflow: hidden;
+  }
+
+  .ui-navigation-menu-item-indicator {
+    width: 100%;
+    transition: transform 200ms ease;
+    transform-origin: center;
+  }
+}