@_linked/primitives 1.0.5

package/lib/cjs/components/Button.module.css

@@ -0,0 +1,246 @@
+@import './helpers/mixins.css';
+
+/* Button component now uses semantic theme variables from theme-defaults.css */
+
+/* $colors: (*/
+/*   'primary': (*/
+/*     'background': var(--primary),*/
+/*     'foreground': var(--primary-foreground),*/
+/*   ),*/
+/*   'secondary': (*/
+/*     'background': var(--secondary),*/
+/*     'foreground': var(--secondary-foreground),*/
+/*   ),*/
+/*   'tertiary': (*/
+/*     'background': var(--tertiary),*/
+/*     'foreground': var(--tertiary-foreground),*/
+/*   ),*/
+/* );*/
+
+/* $variants: solid, outline, ghost, link;*/
+
+.Root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: var(--control-radius);
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  outline: none;
+  transition: var(--transition-fast);
+  border: solid 1px transparent;
+  cursor: pointer;
+  gap: var(--button-gap);
+  padding: var(--button-padding-y) var(--button-padding-x);
+  height: var(--button-height-md);
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  /* // color: 'primary' | 'secondary' | 'tertiary'*/
+  /* // variant: 'solid' | 'outline' | 'ghost'*/
+  /* @each $color, $color-values in $colors {*/
+  /*   &.#{$color} {*/
+  /*     @each $variant in $variants {*/
+  /*       &.#{$variant} {*/
+  /*         @if $variant == 'solid' {*/
+  /*           background: map-get($color-values, 'background');*/
+  /*           color: map-get($color-values, 'foreground');*/
+  /*           border-color: map-get($color-values, 'background');*/
+
+  /*           &:hover {*/
+  /*             background: #2563eb;*/
+  /*           }*/
+  /*         } @else if $variant == 'outline' {*/
+  /*           background: transparent;*/
+  /*           color: map-get($color-values, 'background');*/
+  /*           border: 1px solid map-get($color-values, 'background');*/
+
+  /*           &:hover {*/
+  /*             background: map-get($color-values, 'background');*/
+  /*             color: map-get($color-values, 'foreground');*/
+  /*           }*/
+  /*         } @else if $variant == 'ghost' {*/
+  /*           background: transparent;*/
+  /*           color: map-get($color-values, 'background');*/
+
+  /*           &:hover {*/
+  /*             background: map-get($color-values, 'background');*/
+  /*             color: map-get($color-values, 'foreground');*/
+  /*           }*/
+  /*         } @else if $variant == 'link' {*/
+  /*           background: transparent;*/
+  /*           color: map-get($color-values, 'background');*/
+
+  /*           &:hover {*/
+  /*             text-decoration: underline;*/
+  /*           }*/
+  /*         }*/
+  /*       }*/
+  /*     }*/
+  /*   }*/
+  /* }*/
+
+  /* color: 'primary' | 'secondary' | 'tertiary'*/
+  /* variant: 'solid' | 'outline' | 'ghost'*/
+  &.primary {
+    &.solid {
+      background: var(--button-primary-bg);
+      color: var(--button-primary-color);
+      border-color: var(--button-primary-bg);
+
+      &:hover {
+        background: var(--button-primary-bg-hover);
+        color: var(--button-primary-color-hover);
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-primary-bg);
+      border: 1px solid var(--button-primary-bg);
+
+      &:hover {
+        background: var(--button-primary-bg);
+        color: var(--button-primary-color);
+      }
+    }
+
+    &.ghost,
+    &.link {
+      /* Ghost+link defer to the solid background token so hover states stay in sync across variants. */
+      background: transparent;
+      color: var(--button-primary-bg);
+    }
+
+    &.ghost {
+      /* Ghost uses the solid fill on hover to keep contrast consistent with solid/outline. */
+      &:hover {
+        background: var(--button-primary-bg);
+        color: var(--button-primary-color);
+      }
+    }
+
+    &.link {
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &.secondary {
+    &.solid {
+      background: var(--button-secondary-bg);
+      color: var(--button-secondary-color);
+      border-color: var(--button-secondary-bg);
+
+      &:hover {
+        background: var(--button-secondary-bg-hover);
+        color: var(--button-secondary-color-hover);
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-secondary-bg);
+      border: 1px solid var(--button-secondary-bg); /* Use button background as border color */
+
+      &:hover {
+        background: var(--button-secondary-bg);
+        color: var(--button-secondary-color);
+      }
+    }
+
+    &.ghost {
+      /* Ghost aligns to solid background for hover to avoid divergent theming knobs. */
+      background: transparent;
+      color: var(--button-secondary-bg);
+
+      &:hover {
+        background: var(--button-secondary-bg);
+        color: var(--button-secondary-color);
+      }
+    }
+
+    &.link {
+      background: transparent;
+      color: var(--button-secondary-bg);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &.tertiary {
+    &.solid {
+      background: var(--button-tertiary-bg);
+      color: var(--button-tertiary-color);
+      border-color: var(--button-tertiary-bg);
+
+      &:hover {
+        background: var(--button-tertiary-bg-hover);
+        color: var(--button-tertiary-color-hover);
+      }
+    }
+
+    &.outline {
+      background: transparent;
+      color: var(--button-tertiary-bg);
+      border: 1px solid var(--button-tertiary-bg); /* Use button background as border color */
+
+      &:hover {
+        background: var(--button-tertiary-bg);
+        color: var(--button-tertiary-color);
+      }
+    }
+
+    &.ghost {
+      /* Ghost variant piggybacks on solid tokens so overrides remain centralized. */
+      background: transparent;
+      color: var(--button-tertiary-bg);
+
+      &:hover {
+        background: var(--button-tertiary-bg);
+        color: var(--button-tertiary-color);
+      }
+    }
+
+    &.link {
+      background: transparent;
+      color: var(--button-tertiary-bg);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  /* size: 'small' | 'medium' | 'large' || 'default'*/
+  &.small {
+    padding: var(--button-padding-sm-y) var(--button-padding-sm-x);
+    height: var(--button-height-sm);
+    font-size: var(--button-font-size-sm);
+  }
+
+  &.medium,
+  &.default {
+    padding: var(--button-padding-y) var(--button-padding-x);
+    height: var(--button-height-md);
+  }
+
+  &.large {
+    padding: var(--button-padding-lg-y) var(--button-padding-lg-x);
+    height: var(--button-height-lg);
+    font-size: var(--typography-large-size);
+  }
+
+  /* disabled*/
+  &.disabled {
+    @mixin disabled;
+  }
+}

package/lib/cjs/components/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/lib/cjs/components/Checkbox.module.css

@@ -0,0 +1,43 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  background-color: var(--checkbox-bg, var(--choice-bg));
+  width: var(--checkbox-size, var(--choice-size));
+  height: var(--checkbox-size, var(--choice-size));
+  border-radius: var(--checkbox-radius, var(--choice-radius));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--checkbox-shadow, var(--choice-shadow));
+  border: 1px solid var(--checkbox-border, var(--choice-border));
+  transition: var(--transition-fast);
+
+  &:hover {
+    background-color: var(--checkbox-bg-hover, var(--choice-bg-hover));
+    border-color: var(--checkbox-border-hover, var(--choice-border-hover));
+  }
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  &:disabled {
+    @mixin disabled;
+  }
+
+  &[data-state='checked'] {
+    background-color: var(--checkbox-bg-checked, var(--choice-bg-checked));
+    border-color: var(--checkbox-border-checked, var(--choice-border-checked));
+  }
+}
+
+.Indicator {
+  color: var(--checkbox-indicator, var(--choice-indicator));
+
+  svg {
+    height: var(--checkbox-indicator-size, var(--choice-indicator-size));
+    width: var(--checkbox-indicator-size, var(--choice-indicator-size));
+    margin-top: var(--checkbox-indicator-margin-top, --spacing(0.5));
+  }
+}

package/lib/cjs/components/Collapsible.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+declare const Root: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+declare const Trigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Content: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Collapsible: {
+    Root: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root, Trigger, Content };

package/lib/cjs/components/Command.d.ts

@@ -0,0 +1,167 @@
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+declare const Root: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface CommandDialogProps extends DialogProps {
+}
+declare const Dialog: {
+    ({ children, ...props }: CommandDialogProps): React.JSX.Element;
+    displayName: string;
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const List: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Empty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Group: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Separator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Shortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export declare const Command: {
+    Root: React.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        label?: string;
+        shouldFilter?: boolean;
+        filter?: (value: string, search: string, keywords?: string[]) => number;
+        defaultValue?: string;
+        value?: string;
+        onValueChange?: (value: string) => void;
+        loop?: boolean;
+        disablePointerSelection?: boolean;
+        vimBindings?: boolean;
+    } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Dialog: {
+        ({ children, ...props }: CommandDialogProps): React.JSX.Element;
+        displayName: string;
+    };
+    Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+        ref?: React.Ref<HTMLInputElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+        value?: string;
+        onValueChange?: (search: string) => void;
+    } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    List: React.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        label?: string;
+    } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Empty: React.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+        heading?: React.ReactNode;
+        value?: string;
+        forceMount?: boolean;
+    } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+        disabled?: boolean;
+        onSelect?: (value: string) => void;
+        value?: string;
+        keywords?: string[];
+        forceMount?: boolean;
+    } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Shortcut: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Separator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        alwaysRender?: boolean;
+    } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root, Dialog, Input, List, Empty, Group, Item, Shortcut, Separator };

package/lib/cjs/components/Command.module.css

@@ -0,0 +1,153 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--command-radius, var(--popover-radius));
+  border: 1px solid var(--command-border, var(--popover-border));
+  background-color: var(--command-bg, var(--popover-bg));
+  box-shadow: var(--command-shadow, var(--popover-shadow));
+}
+
+.DialogCommand {
+  &[cmdk-group-heading] {
+    padding-left: --spacing(1);
+    padding-right: --spacing(1);
+    font-weight: var(--typography-font-weight);
+  }
+
+  &[cmdk-group]:not([hidden]) ~ &[cmdk-group] {
+    padding-top: 0;
+  }
+
+  &[cmdk-group] {
+    padding-left: --spacing(1);
+    padding-right: --spacing(1);
+  }
+
+  &[cmdk-input-wrapper] svg {
+    height: --spacing(1);
+    width: --spacing(1);
+  }
+
+  &[cmdk-input] {
+    height: --spacing(3);
+  }
+
+  &[cmdk-item] {
+    padding-left: --spacing(1);
+    padding-right: --spacing(1);
+    padding-top: --spacing(1);
+    padding-bottom: --spacing(1);
+  }
+
+  &[cmdk-item] svg {
+    height: --spacing(1);
+    width: --spacing(1);
+  }
+}
+
+.dialogContent {
+  overflow: hidden;
+  padding: 0;
+  box-shadow: var(--command-shadow, var(--popover-shadow));
+}
+
+.InputContainer {
+  display: flex;
+  align-items: center;
+  border-width: bold;
+  color: var(--field-text);
+}
+
+.Input {
+  font-family: var(--field-font-family);
+  display: flex;
+  color: var(--field-text);
+  height: var(--field-height-md);
+  font-size: var(--field-font-size);
+  font-weight: var(--field-font-weight);
+  background-color: var(--field-bg);
+  transition: var(--transition-normal);
+  border: 0;
+  outline: none;
+
+  &:focus {
+    outline: none;
+    border: 0;
+  }
+}
+
+.Icon {
+  margin: 0 --spacing(2);
+  height: --spacing(4);
+  width: --spacing(4);
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.list {
+  max-height: var(--command-max-height, 300px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: --spacing(3);
+}
+
+.Empty {
+  padding: --spacing(4) 0;
+  text-align: center;
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-small-size);
+  line-height: var(--typography-line-height-none);
+  color: var(--command-text, var(--popover-text));
+}
+
+.Group {
+  overflow: hidden;
+}
+
+div[cmdk-group-heading] {
+  padding: --spacing(2);
+  font-weight: var(--typography-font-weight);
+}
+
+.separator {
+  margin: --spacing(2) 0;
+  height: auto;
+  background-clip: border-box;
+}
+
+.Item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  user-select: none;
+  align-items: center;
+  border-radius: var(--list-item-radius);
+  outline: none;
+  font-family: var(--list-item-font-family);
+  font-size: var(--list-item-font-size);
+  line-height: var(--list-item-line-height);
+  color: var(--list-item-text);
+  padding: var(--list-item-padding-y) var(--list-item-padding-x);
+
+  &[aria-selected='true'] {
+    background-color: var(--list-item-bg-active);
+  }
+
+  &[data-disabled='true'] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+.shortcut {
+  margin-left: auto;
+  font-size: var(--command-shortcut-font-size, var(--text-sm));
+  letter-spacing: var(--letter-spacing-wide);
+  color: var(--command-shortcut-text, var(--text-auxiliary));
+}

package/lib/cjs/components/ContextMenu.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+declare const Group: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Sub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+declare const RadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Root: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuProps & React.RefAttributes<never>>;
+declare const Trigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const SubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Separator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Shortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayname: string;
+};
+export declare const ContextMenu: {
+    Root: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuProps & React.RefAttributes<never>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    CheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    RadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    SubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    SubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Sub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+    RadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Shortcut: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+        displayname: string;
+    };
+};
+export { Root, Trigger, Content, Item, CheckboxItem, RadioItem, Label, Separator, SubTrigger, SubContent, Group, Sub, RadioGroup, Shortcut, };