@_linked/primitives 1.0.5

package/lib/esm/components/Dialog.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const Root: React.FC<DialogPrimitive.DialogProps>;
+declare const Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Close: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+interface ContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    hideCloseIcon?: boolean;
+}
+declare const Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const Header: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const Footer: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+export declare const Dialog: {
+    Root: React.FC<DialogPrimitive.DialogProps>;
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Header: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Close: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Root, Trigger, Content, Overlay, Title, Description, Header, Footer, Close, };

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

@@ -0,0 +1,109 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Overlay {
+  background-color: var(--dialog-overlay-bg, var(--modal-overlay-bg));
+  position: fixed;
+  inset: 0;
+  animation: overlayShow
+    var(--dialog-animation-duration, var(--transition-duration-normal))
+    var(--transition-easing);
+  z-index: var(--z-modal);
+}
+
+.Content {
+  background-color: var(--dialog-bg, var(--modal-bg));
+  border-radius: var(--dialog-radius, var(--modal-radius));
+  box-shadow: var(--dialog-shadow, var(--modal-shadow));
+  position: fixed;
+  top: 50%;
+  left: var(--dialog-position-left, 50%);
+  transform: var(--dialog-transform, translate(-50%, -50%));
+  width: var(--dialog-width, 90vw);
+  max-width: 500px;
+  max-height: 85vh;
+  outline: none;
+  padding: var(--dialog-padding, var(--modal-padding));
+  animation: var(--dialog-animation-name, contentShow)
+    var(--dialog-animation-duration, var(--transition-duration-normal))
+    var(--transition-easing);
+  z-index: calc(var(--z-modal) + 1);
+}
+
+.Close {
+  font-family: inherit;
+  border-radius: var(--modal-radius);
+  height: var(--dialog-close-size, --spacing(6));
+  width: var(--dialog-close-size, --spacing(6));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dialog-close-text, var(--text-primary));
+  position: absolute;
+  top: --spacing(2);
+  right: --spacing(2);
+  transition: var(--transition-normal);
+
+  &:hover {
+    background-color: var(--dialog-close-bg-hover, var(--bg-hover));
+    cursor: pointer;
+  }
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  svg {
+    height: --spacing(5);
+    width: --spacing(5);
+  }
+}
+
+.Title {
+  margin: 0;
+  color: var(--heading-5-color);
+  font-size: var(--heading-5-font-size);
+  font-weight: var(--heading-5-font-weight);
+  font-family: var(--heading-5-font-family);
+  letter-spacing: var(--heading-5-letter-spacing);
+}
+
+.Description {
+  margin-bottom: var(--dialog-gap, var(--modal-gap));
+  color: var(--typography-color);
+  font-size: var(--typography-font-size);
+  line-height: var(--typography-line-height);
+  font-family: var(--typography-font-family);
+}
+
+.Header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dialog-gap, var(--modal-gap));
+}
+
+.Footer {
+  display: flex;
+  gap: var(--dialog-gap, var(--modal-gap));
+  justify-content: flex-end;
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

package/lib/esm/components/Drawer.d.ts

@@ -0,0 +1,40 @@
+/**
+ * copy from https://ui.shadcn.com/docs/components/drawer
+ */
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+declare const Root: {
+    ({ shouldScaleBackground, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
+    displayName: string;
+};
+declare const Trigger: React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Trigger> & React.RefAttributes<React.ElementRef<typeof DrawerPrimitive.Trigger>>>;
+declare const Portal: typeof import("vaul").Portal;
+declare const Close: React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close> & React.RefAttributes<React.ElementRef<typeof DrawerPrimitive.Close>>>;
+declare const Overlay: React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & React.RefAttributes<React.ElementRef<typeof DrawerPrimitive.Overlay>>>;
+interface ContentProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> {
+    hideHandle?: boolean;
+}
+declare const Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const Header: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const Footer: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const Title: React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & React.RefAttributes<React.ElementRef<typeof DrawerPrimitive.Title>>>;
+declare const Description: React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & React.RefAttributes<React.ElementRef<typeof DrawerPrimitive.Description>>>;
+export declare const Drawer: {
+    Root: typeof Root;
+    Portal: typeof Portal;
+    Overlay: typeof Overlay;
+    Trigger: typeof Trigger;
+    Close: typeof Close;
+    Content: typeof Content;
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Title: typeof Title;
+    Description: typeof Description;
+};
+export { Root, Portal, Overlay, Trigger, Close, Content, Header, Footer, Title, Description, };

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

@@ -0,0 +1,87 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  background-color: var(--drawer-overlay-bg, var(--modal-overlay-bg));
+}
+
+.Content {
+  position: fixed;
+  inset-x: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--drawer-radius, var(--modal-radius));
+  background-color: var(--drawer-bg, var(--modal-bg));
+  padding: var(--drawer-padding, var(--modal-padding));
+
+  &[vaul-drawer-direction='right'],
+  &[vaul-drawer-direction='left'] {
+    height: 100%;
+    min-width: var(--drawer-min-width, 350px);
+  }
+
+  &[vaul-drawer-direction='top'],
+  &[vaul-drawer-direction='bottom'] {
+    height: auto;
+    width: 100%;
+  }
+
+  &[vaul-drawer-direction='right'] {
+    right: 0;
+  }
+
+  &[vaul-drawer-direction='left'] {
+    left: 0;
+  }
+
+  &[vaul-drawer-direction='top'] {
+    top: 0;
+  }
+
+  &[vaul-drawer-direction='bottom'] {
+    bottom: 0;
+  }
+}
+
+.Handle {
+  margin: --spacing(4) auto 0;
+  height: --spacing(2);
+  width: var(--drawer-handle-width, 100px);
+  border-radius: var(--drawer-handle-radius, var(--modal-radius));
+  background-color: var(--drawer-handle-bg, var(--border-default));
+}
+
+.Header {
+  display: grid;
+  gap: --spacing(1);
+  text-align: center;
+  margin-bottom: --spacing(4);
+
+  @media (min-width: 640px) {
+    text-align: left;
+  }
+}
+
+.Footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: --spacing(2);
+}
+
+.Title {
+  font-size: var(--heading-5-font-size);
+  font-weight: var(--heading-5-font-weight);
+  line-height: var(--heading-5-line-height);
+  color: var(--heading-5-color);
+}
+
+.Description {
+  font-size: var(--typography-font-size);
+  line-height: var(--typography-line-height);
+  color: var(--typography-color);
+}

package/lib/esm/components/DropdownMenu.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare const Group: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Sub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const RadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Root: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuProps & React.RefAttributes<never>>;
+declare const Trigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Separator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Shortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayname: string;
+};
+declare const DropdownMenu: {
+    Root: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuProps & React.RefAttributes<never>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    CheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    RadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    SubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    SubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Sub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+    RadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Shortcut: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+        displayname: string;
+    };
+};
+export default DropdownMenu;
+export { Root, Trigger, Content, Item, CheckboxItem, RadioItem, Label, Separator, SubTrigger, SubContent, Group, Sub, RadioGroup, Shortcut, DropdownMenu, };

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

@@ -0,0 +1,244 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  display: flex;
+  flex-direction: column;
+  width: var(--dropdownmenu-container-width, 100%);
+}
+
+.Trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--dropdownmenu-trigger-radius, var(--control-radius));
+  font-size: var(--dropdownmenu-trigger-font-size, var(--typography-font-size));
+  font-weight: var(
+    --dropdownmenu-trigger-font-weight,
+    var(--typography-font-weight-medium)
+  );
+  height: var(--dropdownmenu-trigger-height, var(--control-height-md));
+  padding: var(--dropdownmenu-trigger-padding, --spacing(2) --spacing(4));
+  transition: var(--transition-fast);
+  border: 1px solid var(--dropdownmenu-trigger-border, var(--control-border));
+  background-color: var(--dropdownmenu-trigger-bg, var(--control-bg));
+  color: var(--dropdownmenu-trigger-text, var(--control-text));
+
+  &:hover {
+    background-color: var(
+      --dropdownmenu-trigger-bg-hover,
+      var(--control-bg-hover)
+    );
+    border-color: var(
+      --dropdownmenu-trigger-border-hover,
+      var(--control-border-hover)
+    );
+  }
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  &[data-state='open'] {
+    background-color: var(
+      --dropdownmenu-trigger-bg-active,
+      var(--control-bg-active)
+    );
+    border-color: var(
+      --dropdownmenu-trigger-border-active,
+      var(--control-border-hover)
+    );
+  }
+}
+
+.Content {
+  min-width: var(--dropdownmenu-content-min-width, 8rem);
+  overflow: hidden;
+  border-radius: var(--dropdownmenu-content-radius, var(--popover-radius));
+  border: 1px solid var(--dropdownmenu-content-border, var(--popover-border));
+  background-color: var(--dropdownmenu-content-bg, var(--popover-bg));
+  padding: var(--dropdownmenu-content-padding, --spacing(1));
+  box-shadow: var(--dropdownmenu-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(--dropdownmenu-item-font-size, var(--typography-small-size));
+  line-height: var(
+    --dropdownmenu-item-line-height,
+    var(--typography-line-height-none)
+  );
+  border-radius: var(--dropdownmenu-item-radius, var(--popover-radius));
+  display: flex;
+  align-items: center;
+  height: var(--dropdownmenu-item-height, --spacing(8));
+  padding: var(--dropdownmenu-item-padding, --spacing(2) --spacing(3));
+  position: relative;
+  padding-left: var(--dropdownmenu-item-padding-left, --spacing(3));
+  user-select: none;
+  outline: none;
+  color: var(--dropdownmenu-item-text, var(--popover-text));
+  cursor: pointer;
+  transition: var(--transition-fast);
+
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-highlighted] {
+    background-color: var(--dropdownmenu-item-bg-active, var(--bg-active));
+    color: var(--dropdownmenu-item-text-active, var(--popover-text));
+  }
+}
+
+.SubTrigger {
+  &[data-state='open'] {
+    background-color: var(--dropdownmenu-subtrigger-bg-open, var(--bg-active));
+    color: var(--dropdownmenu-subtrigger-text-open, var(--popover-text));
+  }
+}
+
+.CheckboxItem,
+.RadioItem {
+  padding-left: var(--dropdownmenu-checkbox-padding-left, --spacing(6));
+}
+
+.ItemIndicator {
+  position: absolute;
+  left: 0;
+  width: var(--dropdownmenu-indicator-width, --spacing(5));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.RightSlot {
+  margin-left: auto;
+  padding-left: var(--dropdownmenu-right-slot-padding, --spacing(5));
+  font-size: var(
+    --dropdownmenu-right-slot-font-size,
+    var(--typography-small-size)
+  );
+  color: var(--dropdownmenu-right-slot-text, var(--text-auxiliary));
+}
+
+.Label {
+  padding-left: var(--dropdownmenu-label-padding-left, --spacing(3));
+  padding-right: var(--dropdownmenu-label-padding-right, --spacing(3));
+  font-size: var(--dropdownmenu-label-font-size, var(--typography-small-size));
+  font-weight: var(
+    --dropdownmenu-label-font-weight,
+    var(--typography-font-weight-semibold)
+  );
+  color: var(--dropdownmenu-label-text, var(--text-auxiliary));
+  line-height: var(
+    --dropdownmenu-label-line-height,
+    var(--typography-line-height-none)
+  );
+}
+
+.Separator {
+  height: 1px;
+  background-color: var(--dropdownmenu-separator-bg, var(--border-default));
+  margin: var(--dropdownmenu-separator-margin, --spacing(1));
+}
+
+.SubContent {
+  min-width: var(--dropdownmenu-subcontent-min-width, 8rem);
+  overflow: hidden;
+  border-radius: var(--dropdownmenu-subcontent-radius, var(--popover-radius));
+  border: 1px solid var(--dropdownmenu-subcontent-border, var(--popover-border));
+  background-color: var(--dropdownmenu-subcontent-bg, var(--popover-bg));
+  padding: var(--dropdownmenu-subcontent-padding, --spacing(1));
+  box-shadow: var(--dropdownmenu-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(--dropdownmenu-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);
+  }
+}

package/lib/esm/components/Form.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as FormPrimitive from '@radix-ui/react-form';
+declare const Root: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormProps & React.RefAttributes<HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>;
+declare const Field: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormFieldProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormLabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const Control: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormControlProps & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Message: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormMessageProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const ValidityState: React.ForwardRefExoticComponent<FormPrimitive.FormValidityStateProps & {
+    __scopeForm?: import("@radix-ui/react-context").Scope;
+} & React.RefAttributes<never>>;
+declare const Submit: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormSubmitProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Form: {
+    Root: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormProps & React.RefAttributes<HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>;
+    Field: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormFieldProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormLabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+    Control: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormControlProps & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    Message: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormMessageProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    ValidityState: React.ForwardRefExoticComponent<FormPrimitive.FormValidityStateProps & {
+        __scopeForm?: import("@radix-ui/react-context").Scope;
+    } & React.RefAttributes<never>>;
+    Submit: React.ForwardRefExoticComponent<Omit<FormPrimitive.FormSubmitProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Root, Field, Label, Control, Message, ValidityState, Submit };

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

@@ -0,0 +1,75 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-gap, --spacing(4));
+  width: var(--form-width, 100%);
+}
+
+.Field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-field-gap, --spacing(2));
+}
+
+.Label {
+  font-size: var(--form-label-font-size, var(--typography-font-size));
+  font-weight: var(--form-label-font-weight, var(--typography-font-weight));
+  color: var(--form-label-text, var(--typography-color));
+  line-height: var(--form-label-line-height, var(--typography-line-height));
+}
+
+.Control {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-control-gap, --spacing(1));
+}
+
+.Message {
+  font-size: var(--form-message-font-size, var(--typography-small-size));
+  color: var(--form-message-text, var(--text-auxiliary));
+  line-height: var(
+    --form-message-line-height,
+    var(--typography-line-height-none)
+  );
+}
+
+.ValidityState {
+  font-size: var(--form-validity-font-size, var(--typography-small-size));
+  color: var(--form-validity-text, var(--text-auxiliary));
+  line-height: var(
+    --form-validity-line-height,
+    var(--typography-line-height-none)
+  );
+}
+
+.Submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--form-submit-radius, var(--control-radius));
+  font-size: var(--form-submit-font-size, var(--typography-font-size));
+  font-weight: var(--form-submit-font-weight, var(--typography-font-weight));
+  height: var(--form-submit-height, var(--control-height-md));
+  padding: var(--form-submit-padding, --spacing(2) --spacing(4));
+  transition: var(--transition-fast);
+  border: 1px solid var(--form-submit-border, var(--control-border));
+  background-color: var(--form-submit-bg, var(--control-bg));
+  color: var(--form-submit-text, var(--control-text));
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--form-submit-bg-hover, var(--control-bg-hover));
+    border-color: var(--form-submit-border-hover, var(--control-border-hover));
+  }
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  &:disabled {
+    @mixin disabled;
+  }
+}

package/lib/esm/components/Heading.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface HeadingProps extends React.HtmlHTMLAttributes<HTMLElement> {
+    as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    children: React.ReactNode;
+}
+declare const Heading: ({ as: Component, className, children, ...props }: HeadingProps) => React.JSX.Element;
+export { Heading };