@_linked/primitives 1.0.5

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+type MultiSelectorProps = {
+    values: string[];
+    onValuesChange: (value: string[]) => void;
+    loop?: boolean;
+} & React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
+declare const Root: {
+    ({ values: value, onValuesChange: onValueChange, loop, className, children, dir, ...props }: MultiSelectorProps): React.JSX.Element;
+    displayName: string;
+};
+declare const Trigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+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 Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+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 Item: React.ForwardRefExoticComponent<{
+    value: string;
+} & 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>>;
+export declare const MultiSelect: {
+    Root: {
+        ({ values: value, onValuesChange: onValueChange, loop, className, children, dir, ...props }: MultiSelectorProps): React.JSX.Element;
+        displayName: string;
+    };
+    Trigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    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>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    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>>;
+    Item: React.ForwardRefExoticComponent<{
+        value: string;
+    } & 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>>;
+};
+export { Root, Trigger, Input, Content, List, Item };

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

@@ -0,0 +1,93 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--multiselect-gap, --spacing(1));
+  padding: var(--multiselect-padding, --spacing(2));
+  border-color: var(--multiselect-border, var(--selector-border));
+  border-radius: var(--multiselect-radius, var(--selector-radius));
+
+  .button {
+    display: flex;
+    align-items: center;
+    gap: var(--multiselect-button-gap, --spacing(1));
+    height: var(--multiselect-button-height, 35px);
+    background-color: var(--multiselect-selected-bg, var(--control-accent));
+    color: var(--multiselect-selected-text, var(--control-text-contrast));
+    border-radius: var(--multiselect-selected-radius, var(--selector-radius));
+    padding: var(--multiselect-selected-padding-y, --spacing(1))
+      var(--multiselect-selected-padding-x, --spacing(2));
+    font-size: var(
+      --multiselect-selected-font-size,
+      var(--typography-small-size)
+    );
+    border: 1px solid var(--multiselect-selected-border, var(--control-accent));
+  }
+}
+
+.Command {
+  display: flex;
+  overflow: visible;
+  background-color: transparent;
+  flex-direction: column;
+}
+
+.isActive {
+  caret-color: transparent;
+}
+
+.Content {
+  position: relative;
+}
+
+.input {
+  margin-left: var(--multiselect-input-margin-left, --spacing(2));
+  padding: var(--multiselect-input-padding-y, --spacing(1))
+    var(--multiselect-input-padding-x, --spacing(2));
+  outline: none;
+  flex: 1 1 0%;
+  border: 0 solid transparent;
+  min-height: var(--multiselect-input-min-height, var(--field-height-sm));
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--multiselect-list-gap, --spacing(1));
+  border-radius: var(--multiselect-list-radius, var(--selector-radius));
+}
+
+.Item {
+  border-radius: var(--multiselect-item-radius, var(--selector-radius));
+  transition: var(--transition-fast);
+  display: flex;
+  justify-content: space-between;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.isIncluded {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.isDisabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.option {
+  font-size: var(--multiselect-option-font-size, var(--typography-small-size));
+  line-height: var(
+    --multiselect-option-line-height,
+    var(--typography-line-height-none)
+  );
+}
+
+.emptyResult {
+  color: var(--text-auxiliary);
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+declare const List: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const Link: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const Item: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const Trigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Viewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Indicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Root: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const NavigationMenu: {
+    Root: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root, Trigger, Content, List, Item, Link, Indicator, Viewport };

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

@@ -0,0 +1,248 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100vw;
+  z-index: 1;
+}
+
+.List {
+  display: flex;
+  justify-content: center;
+  background-color: var(--navigation-bg, var(--popover-bg));
+  padding: var(--navigation-padding, --spacing(2));
+  border-radius: var(--navigation-radius, var(--popover-radius));
+  list-style: none;
+  box-shadow: var(--navigation-shadow, var(--popover-shadow));
+  margin: 0;
+}
+
+.Trigger,
+.Link {
+  padding: var(--navigationmenu-item-padding-y, --spacing(3))
+    var(--navigationmenu-item-padding-x, --spacing(4));
+  outline: none;
+  user-select: none;
+  font-weight: var(
+    --navigationmenu-item-font-weight,
+    var(--typography-font-weight)
+  );
+  line-height: var(
+    --navigationmenu-item-line-height,
+    var(--typography-line-height-none)
+  );
+  border-radius: var(--navigation-item-radius, var(--popover-radius));
+  font-size: var(--navigationmenu-item-font-size, var(--typography-font-size));
+  color: var(--navigation-text, var(--popover-text));
+  transition: var(--transition-normal);
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  &:hover {
+    background-color: var(--navigation-bg-hover, var(--bg-active));
+  }
+}
+
+.Trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--navigationmenu-trigger-gap, --spacing(1));
+}
+
+.Link {
+  display: block;
+  text-decoration: none;
+}
+
+.Content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  animation-duration: var(--transition-duration-normal);
+  animation-timing-function: ease;
+
+  &[data-motion='from-start'] {
+    animation-name: enterFromLeft;
+  }
+
+  &[data-motion='from-end'] {
+    animation-name: enterFromRight;
+  }
+
+  &[data-motion='to-start'] {
+    animation-name: exitToLeft;
+  }
+
+  &[data-motion='to-end'] {
+    animation-name: exitToRight;
+  }
+
+  @media only screen and (min-width: 600px) {
+    width: auto;
+  }
+}
+
+.ViewportPosition {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  top: 100%;
+  left: 0;
+  perspective: 2000px;
+}
+
+.Viewport {
+  position: relative;
+  transform-origin: top center;
+  margin-top: var(--navigationmenu-viewport-margin-top, --spacing(2));
+  width: 100%;
+  background-color: var(--navigation-viewport-bg, var(--popover-bg));
+  border-radius: var(--navigation-viewport-radius, var(--popover-radius));
+  overflow: hidden;
+  box-shadow: var(--navigation-viewport-shadow, var(--popover-shadow));
+  height: var(--radix-navigation-menu-viewport-height);
+  transition: width, height, var(--transition-duration-normal) ease;
+
+  &[data-state='open'] {
+    animation: scaleIn var(--transition-duration-normal) ease;
+  }
+
+  &[data-state='closed'] {
+    animation: scaleOut var(--transition-duration-normal) ease;
+  }
+
+  @media only screen and (min-width: 600px) {
+    width: var(--radix-navigation-menu-viewport-width);
+  }
+}
+
+.Indicator {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: var(--navigationmenu-indicator-height, --spacing(2));
+  top: 100%;
+  overflow: hidden;
+  z-index: 1;
+  transition: width, transform var(--transition-duration-normal) ease;
+
+  &[data-state='visible'] {
+    animation: fadeIn var(--transition-duration-normal) ease;
+  }
+  &[data-state='hidden'] {
+    animation: fadeOut var(--transition-duration-normal) ease;
+  }
+}
+
+.CaretDown {
+  position: relative;
+  color: var(--navigation-text, var(--popover-text));
+  top: 1px;
+  transition: transform var(--transition-duration-normal) ease;
+}
+
+[data-state='open'] > .CaretDown {
+  transform: rotate(180deg);
+}
+
+.Arrow {
+  position: relative;
+  top: 70%;
+  background-color: var(--navigation-arrow-bg, var(--popover-bg));
+  width: var(--navigationmenu-arrow-size, --spacing(2));
+  height: var(--navigationmenu-arrow-size, --spacing(2));
+  transform: rotate(45deg);
+  border-top-left-radius: 2px;
+}
+
+@keyframes enterFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes enterFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-200px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes exitToRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+}
+
+@keyframes exitToLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-200px);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: rotateX(-30deg) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: rotateX(-10deg) scale(0.95);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare const Root: React.FC<PopoverPrimitive.PopoverProps>;
+declare const Trigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Anchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const Arrow: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const Close: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Popover: {
+    Root: React.FC<PopoverPrimitive.PopoverProps>;
+    Trigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Anchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Root, Trigger, Anchor, Content, Arrow, Close };

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

@@ -0,0 +1,106 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Content {
+  border-radius: var(--popover-radius);
+  padding: var(--popover-padding);
+  width: var(--popover-width, 16rem);
+  background: var(--popover-bg);
+  box-shadow: var(--popover-shadow);
+  animation-duration: var(--transition-duration-normal);
+  animation-timing-function: var(--transition-easing);
+  will-change: transform, opacity;
+  z-index: var(--layer-popover);
+
+  &[data-state='open'][data-side='top'] {
+    animation-name: slideDownAndFade;
+  }
+
+  &[data-state='open'][data-side='right'] {
+    animation-name: slideLeftAndFade;
+  }
+
+  &[data-state='open'][data-side='bottom'] {
+    animation-name: slideUpAndFade;
+  }
+
+  &[data-state='open'][data-side='left'] {
+    animation-name: slideRightAndFade;
+  }
+}
+
+.Arrow {
+  fill: var(--popover-bg);
+}
+
+.Close {
+  font-family: inherit;
+  border-radius: var(--popover-radius);
+  height: --spacing(6);
+  width: --spacing(6);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--popover-close-color, var(--typography-color));
+  position: absolute;
+  top: --spacing(2);
+  right: --spacing(2);
+  transition: var(--transition-normal);
+
+  &:hover {
+    background-color: var(--popover-close-bg-hover, var(--bg-hover));
+  }
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  svg {
+    height: --spacing(5);
+    width: --spacing(5);
+  }
+}
+
+@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/Progress.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+declare const Indicator: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Root: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Progress: {
+    Root: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root, Indicator };

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

@@ -0,0 +1,23 @@
+@import '@_linked/css/package.css';
+
+.Root {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--progress-track-bg, var(--meter-track-bg));
+  border-radius: var(--progress-radius, var(--meter-radius));
+  width: var(--progress-width, 100%);
+  height: var(--progress-height, --spacing(2));
+
+  /* Fix overflow clipping in Safari */
+  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
+  transform: translateZ(0);
+}
+
+.Indicator {
+  background-color: var(--progress-indicator-bg, var(--meter-indicator-bg));
+  width: 100%;
+  height: 100%;
+  transition: transform
+    var(--progress-animation-duration, var(--transition-duration-normal))
+    cubic-bezier(0.65, 0, 0.35, 1);
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+declare const Root: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const RadioGroup: {
+    Root: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Root, Item };

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

@@ -0,0 +1,57 @@
+@import '../components/helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--radiogroup-gap, var(--choice-gap));
+}
+
+.Item {
+  background-color: var(--radiogroup-bg, var(--choice-bg));
+  width: var(--radiogroup-size, var(--choice-size));
+  height: var(--radiogroup-size, var(--choice-size));
+  border-radius: var(--radiogroup-radius, 50%);
+  border: 2px solid var(--radiogroup-border, var(--choice-border));
+  box-shadow: var(--radiogroup-shadow, var(--choice-shadow));
+  cursor: pointer;
+  transition: var(--transition-fast);
+
+  &:hover {
+    background-color: var(--radiogroup-bg-hover, var(--choice-bg-hover));
+    border-color: var(--radiogroup-border-hover, var(--choice-border-hover));
+  }
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  &[data-state='checked'] {
+    background-color: var(--radiogroup-bg-checked, var(--choice-bg));
+    border-color: var(--radiogroup-border-checked, var(--control-accent));
+  }
+}
+
+.Indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    width: var(--radiogroup-indicator-size, --spacing(2));
+    height: var(--radiogroup-indicator-size, --spacing(2));
+    border-radius: 50%;
+    background-color: var(--radiogroup-indicator-bg, var(--control-accent));
+    opacity: 0;
+    transition: var(--transition-fast);
+  }
+
+  &[data-state='checked']:after {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+declare const Scrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Root: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ScrollArea: {
+    Root: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Scrollbar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root, Scrollbar };