@_linked/primitives 1.0.5

package/lib/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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, };

package/lib/esm/components/ContextMenu.module.css

@@ -0,0 +1,238 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  display: flex;
+  flex-direction: column;
+  width: var(--contextmenu-container-width, 100%);
+}
+
+.Trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--contextmenu-trigger-radius, var(--control-radius));
+  font-size: var(--contextmenu-trigger-font-size, var(--typography-font-size));
+  font-weight: var(
+    --contextmenu-trigger-font-weight,
+    var(--typography-font-weight)
+  );
+  height: var(--contextmenu-trigger-height, var(--control-height-md));
+  padding: var(--contextmenu-trigger-padding, --spacing(2) --spacing(4));
+  transition: var(--transition-fast);
+  border: 1px solid var(--contextmenu-trigger-border, var(--control-border));
+  background-color: var(--contextmenu-trigger-bg, var(--control-bg));
+  color: var(--contextmenu-trigger-text, var(--control-text));
+
+  &:hover {
+    background-color: var(
+      --contextmenu-trigger-bg-hover,
+      var(--control-bg-hover)
+    );
+    border-color: var(
+      --contextmenu-trigger-border-hover,
+      var(--control-border-hover)
+    );
+  }
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  &[data-state='open'] {
+    background-color: var(
+      --contextmenu-trigger-bg-active,
+      var(--control-bg-active)
+    );
+    border-color: var(
+      --contextmenu-trigger-border-active,
+      var(--control-border-active)
+    );
+  }
+}
+
+.Content {
+  min-width: var(--contextmenu-content-min-width, 8rem);
+  overflow: hidden;
+  border-radius: var(--contextmenu-content-radius, var(--popover-radius));
+  border: 1px solid var(--contextmenu-content-border, var(--popover-border));
+  background-color: var(--contextmenu-content-bg, var(--popover-bg));
+  padding: var(--contextmenu-content-padding, --spacing(1));
+  box-shadow: var(--contextmenu-content-shadow, var(--popover-shadow));
+  animation-duration: var(--transition-duration-normal);
+  animation-timing-function: var(--transition-easing);
+  will-change: transform, opacity;
+
+  &[data-side='top'] {
+    animation-name: slideDownAndFade;
+  }
+
+  &[data-side='right'] {
+    animation-name: slideLeftAndFade;
+  }
+
+  &[data-side='bottom'] {
+    animation-name: slideUpAndFade;
+  }
+
+  &[data-side='left'] {
+    animation-name: slideRightAndFade;
+  }
+}
+
+.Item,
+.SubTrigger,
+.CheckboxItem,
+.RadioItem {
+  all: unset;
+  font-size: var(--contextmenu-item-font-size, var(--text-sm));
+  line-height: var(
+    --contextmenu-item-line-height,
+    var(--typography-line-height-none)
+  );
+  border-radius: var(--contextmenu-item-radius, var(--popover-radius));
+  display: flex;
+  align-items: center;
+  height: var(--contextmenu-item-height, --spacing(8));
+  padding: var(--contextmenu-item-padding, --spacing(2) --spacing(3));
+  position: relative;
+  padding-left: var(--contextmenu-item-padding-left, --spacing(3));
+  user-select: none;
+  outline: none;
+  color: var(--contextmenu-item-text, var(--popover-text));
+  cursor: pointer;
+  transition: var(--transition-fast);
+
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-highlighted] {
+    background-color: var(--contextmenu-item-bg-active, var(--bg-active));
+    color: var(--contextmenu-item-text-active, var(--popover-text));
+  }
+}
+
+.SubTrigger {
+  &[data-state='open'] {
+    background-color: var(--contextmenu-subtrigger-bg-open, var(--bg-active));
+    color: var(--contextmenu-subtrigger-text-open, var(--popover-text));
+  }
+}
+
+.CheckboxItem,
+.RadioItem {
+  padding-left: var(--contextmenu-checkbox-padding-left, --spacing(6));
+}
+
+.ItemIndicator {
+  position: absolute;
+  left: 0;
+  width: var(--contextmenu-indicator-width, --spacing(5));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.RightSlot {
+  margin-left: auto;
+  padding-left: var(--contextmenu-right-slot-padding, --spacing(5));
+  font-size: var(--contextmenu-right-slot-font-size, var(--text-xs));
+  color: var(--contextmenu-right-slot-text, var(--text-auxiliary));
+}
+
+.Label {
+  padding-left: var(--contextmenu-label-padding-left, --spacing(3));
+  padding-right: var(--contextmenu-label-padding-right, --spacing(3));
+  font-size: var(--contextmenu-label-font-size, var(--text-xs));
+  font-weight: var(--contextmenu-label-font-weight, var(--heading-font-weight));
+  color: var(--contextmenu-label-text, var(--text-auxiliary));
+  line-height: var(
+    --contextmenu-label-line-height,
+    var(--typography-line-height-none)
+  );
+}
+
+.Separator {
+  height: 1px;
+  background-color: var(--contextmenu-separator-bg, var(--border-default));
+  margin: var(--contextmenu-separator-margin, --spacing(1));
+}
+
+.SubContent {
+  min-width: var(--contextmenu-subcontent-min-width, 8rem);
+  overflow: hidden;
+  border-radius: var(--contextmenu-subcontent-radius, var(--popover-radius));
+  border: 1px solid var(--contextmenu-subcontent-border, var(--popover-border));
+  background-color: var(--contextmenu-subcontent-bg, var(--popover-bg));
+  padding: var(--contextmenu-subcontent-padding, --spacing(1));
+  box-shadow: var(--contextmenu-subcontent-shadow, var(--popover-shadow));
+  animation-duration: var(--transition-duration-normal);
+  animation-timing-function: var(--transition-easing);
+  will-change: transform, opacity;
+
+  &[data-side='top'] {
+    animation-name: slideDownAndFade;
+  }
+
+  &[data-side='right'] {
+    animation-name: slideLeftAndFade;
+  }
+
+  &[data-side='bottom'] {
+    animation-name: slideUpAndFade;
+  }
+
+  &[data-side='left'] {
+    animation-name: slideRightAndFade;
+  }
+}
+
+.Inset {
+  padding-left: var(--contextmenu-inset-padding-left, --spacing(6));
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}