@_linked/primitives 1.0.5

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

@@ -0,0 +1,153 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Trigger {
+  color: var(--select-trigger-text, var(--selector-trigger-text));
+  background-color: var(--select-trigger-bg, var(--selector-trigger-bg));
+  border: 1px solid var(--select-trigger-border, var(--selector-trigger-border));
+  border-radius: var(--select-trigger-radius, var(--selector-radius));
+  box-shadow: var(--select-trigger-shadow, var(--field-shadow));
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--select-trigger-gap, var(--selector-trigger-gap, --spacing(2)));
+  padding: var(
+      --select-trigger-padding-y,
+      var(--selector-trigger-padding-y, --spacing(2))
+    )
+    var(--select-trigger-padding-x, var(--selector-trigger-padding-x));
+  font-family: var(--select-trigger-font-family, var(--field-font-family));
+  font-size: var(--select-trigger-font-size, var(--field-font-size));
+  font-weight: var(--select-trigger-font-weight, var(--field-font-weight));
+  line-height: var(--select-trigger-line-height, var(--field-line-height));
+  min-height: var(--select-trigger-height, var(--selector-trigger-height-md));
+  transition: var(--transition-normal);
+
+  &:hover {
+    background-color: var(--select-trigger-bg-hover, var(--field-bg-hover));
+    border-color: var(--select-trigger-border-hover, var(--field-border-hover));
+  }
+
+  &:focus-visible {
+    @mixin focus;
+    background-color: var(--select-trigger-bg-focus, var(--field-bg-focus));
+  }
+
+  &:disabled {
+    @mixin disabled;
+  }
+
+  &[data-placeholder] {
+    color: var(--select-trigger-placeholder, var(--field-text-placeholder));
+  }
+
+  &.small {
+    min-height: var(
+      --select-trigger-height-sm,
+      var(--selector-trigger-height-sm)
+    );
+  }
+
+  &.medium,
+  &.default {
+    min-height: var(--select-trigger-height, var(--selector-trigger-height-md));
+  }
+
+  &.large {
+    min-height: var(
+      --select-trigger-height-lg,
+      var(--selector-trigger-height-lg)
+    );
+  }
+}
+
+.Icon {
+  color: var(--select-trigger-text, var(--selector-trigger-text));
+
+  svg {
+    opacity: 0.8;
+    width: var(--select-trigger-icon-size, var(--selector-trigger-icon-size));
+    height: var(--select-trigger-icon-size, var(--selector-trigger-icon-size));
+  }
+}
+
+.ScrollButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--select-scroll-button-height, var(--selector-trigger-height-md));
+  background-color: var(--select-scroll-button-bg, var(--selector-panel-bg));
+  color: var(--select-scroll-button-color, var(--selector-option-text));
+  cursor: default;
+}
+
+.Content {
+  position: relative;
+  z-index: var(--layer-popover);
+  max-height: var(--select-content-max-height, --spacing(96));
+  min-width: var(--select-content-min-width, --spacing(32));
+  overflow: hidden;
+  background-color: var(--select-panel-bg, var(--selector-panel-bg));
+  border: 1px solid var(--select-panel-border, var(--selector-panel-border));
+  border-radius: var(--select-panel-radius, var(--selector-radius));
+  box-shadow: var(--select-panel-shadow, var(--selector-panel-shadow));
+}
+
+.PopperViewport {
+  height: var(--radix-select-trigger-height);
+  width: 100%;
+  min-width: var(--radix-select-trigger-width);
+}
+
+.Viewport {
+  padding: var(--select-viewport-padding, --spacing(2));
+}
+
+.Label {
+  padding: var(--select-label-padding, --spacing(2) var(--field-padding-x));
+  font-family: var(--select-label-font-family, var(--field-font-family));
+  font-size: var(--select-label-font-size, var(--typography-small-size));
+  font-weight: var(--select-label-font-weight, var(--typography-font-weight));
+  color: var(--select-label-color, var(--text-auxiliary));
+}
+
+.Item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--select-option-padding, --spacing(2) --spacing(4));
+  border-radius: var(--select-option-radius, var(--list-item-radius));
+  min-height: var(--select-option-height, var(--selector-trigger-height-md));
+  font-family: var(--select-option-font-family, var(--field-font-family));
+  font-size: var(--select-option-font-size, var(--field-font-size));
+  line-height: var(--select-option-line-height, var(--field-line-height));
+  color: var(--select-option-text, var(--selector-option-text));
+  cursor: pointer;
+  transition: var(--transition-fast);
+
+  &[data-disabled] {
+    @mixin disabled;
+    cursor: not-allowed;
+  }
+
+  &[data-highlighted] {
+    outline: none;
+    background-color: var(--select-option-bg-active, var(--control-accent));
+    color: var(--select-option-text-active, var(--control-text-contrast));
+  }
+}
+
+.ItemIndicator {
+  position: absolute;
+  left: 0;
+  display: none; /* Hide checkmark, using background color instead */
+  align-items: center;
+  justify-content: center;
+  width: var(--select-option-indicator-width, --spacing(6));
+}
+
+.Separator {
+  height: var(--select-separator-thickness, 1px);
+  background-color: var(--select-separator-color, var(--separator-color));
+  margin: var(--select-separator-margin, --spacing(2));
+}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

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

@@ -0,0 +1,13 @@
+.Root {
+  background-color: var(--separator-color, var(--separator-color));
+
+  &[data-orientation='horizontal'] {
+    height: var(--separator-thickness, 1px);
+    width: 100%;
+  }
+
+  &[data-orientation='vertical'] {
+    height: 100%;
+    width: var(--separator-thickness, 1px);
+  }
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+declare const Track: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderTrackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Range: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderRangeProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Thumb: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderThumbProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const Root: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Slider: {
+    Root: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Track: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderTrackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Range: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderRangeProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Thumb: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderThumbProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+};
+export { Root, Track, Range, Thumb };

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

@@ -0,0 +1,43 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  width: var(--slider-width, var(--track-control-width));
+  height: var(--slider-height, var(--track-control-height));
+}
+
+.Track {
+  background-color: var(--slider-track-bg, var(--track-control-track-bg));
+  position: relative;
+  flex-grow: 1;
+  border-radius: var(--slider-track-radius, var(--track-control-track-radius));
+  height: var(--slider-track-height, var(--track-control-track-height));
+}
+
+.Range {
+  position: absolute;
+  background-color: var(
+    --slider-range-bg,
+    var(--track-control-track-bg-active)
+  );
+  border-radius: var(--slider-track-radius, var(--track-control-track-radius));
+  height: 100%;
+}
+
+.Thumb {
+  display: block;
+  width: var(--slider-thumb-size, var(--track-control-thumb-size));
+  height: var(--slider-thumb-size, var(--track-control-thumb-size));
+  background-color: var(--slider-thumb-bg, var(--track-control-thumb-bg));
+  box-shadow: var(--slider-thumb-shadow, var(--track-control-thumb-shadow));
+  border-radius: var(--slider-thumb-radius, 50%);
+
+  &:focus-visible {
+    @mixin focus;
+  }
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function Spinner({ active }: {
+    active?: boolean;
+}): React.JSX.Element;

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

@@ -0,0 +1,21 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.spinner {
+  border: var(--spinner-border-width, 4px) solid
+    var(--spinner-track-color, transparent);
+  border-top-color: var(--spinner-indicator-color, var(--meter-indicator-bg));
+  border-radius: 50%;
+  width: var(--spinner-size, --spacing(4));
+  height: var(--spinner-size, --spacing(4));
+  animation: spin var(--spinner-animation-duration, 1s) linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

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

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

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

@@ -0,0 +1,52 @@
+@import '../components/helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  width: var(--switch-track-width, --spacing(11));
+  height: var(--switch-track-height, --spacing(6));
+  background-color: var(--switch-track-bg, var(--color-gray-200));
+  border-radius: 9999px;
+  position: relative;
+  box-shadow: var(--switch-track-shadow, var(--shadow-sm));
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  transition: var(--transition-normal);
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  &[data-state='checked'] {
+    background-color: var(--switch-track-bg-checked, var(--control-accent));
+  }
+}
+
+.Thumb {
+  display: block;
+  width: var(--switch-thumb-size, --spacing(5));
+  height: var(--switch-thumb-size, --spacing(5));
+  background-color: var(--switch-thumb-bg, var(--color-white));
+  border-radius: 50%;
+  box-shadow: var(--switch-thumb-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
+  transition: transform var(--transition-normal);
+  transform: translateX(var(--switch-thumb-offset, --spacing(0.5)));
+  will-change: transform;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  margin-top: calc(var(--switch-thumb-size, --spacing(5)) / -2);
+
+  &[data-state='checked'] {
+    transform: translateX(
+      calc(
+        var(--switch-track-width, --spacing(11)) -
+          var(--switch-thumb-size, --spacing(5)) -
+          var(--switch-thumb-offset, --spacing(0.5))
+      )
+    );
+  }
+
+  &:disabled {
+    @mixin disabled;
+  }
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+declare const Root: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const List: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Trigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Tabs: {
+    Root: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root, List, Trigger, Content };

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

@@ -0,0 +1,64 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  display: flex;
+  flex-direction: column;
+  width: var(--tabs-container-width, 100%);
+  box-shadow: var(--tabs-container-shadow, var(--surface-shadow));
+}
+
+.List {
+  flex-shrink: 0;
+  display: flex;
+  border-bottom: 1px solid var(--tabs-border, var(--navigation-border));
+  gap: var(--tabs-trigger-gap, var(--navigation-gap));
+}
+
+.Trigger {
+  font-family: inherit;
+  background-color: var(--tabs-trigger-bg, var(--bg-panel));
+  color: var(--tabs-trigger-text, var(--text-primary));
+  padding: 0 var(--tabs-trigger-padding-x, --spacing(4));
+  min-height: var(--tabs-trigger-height, var(--control-height-md));
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tabs-trigger-font-size, var(--typography-font-size));
+  line-height: 1;
+  user-select: none;
+  border-top-left-radius: var(--tabs-trigger-radius, var(--radius-tabs));
+  border-top-right-radius: var(--tabs-trigger-radius, var(--radius-tabs));
+  transition: var(--transition-normal);
+
+  &:hover {
+    color: var(--tabs-trigger-text-hover, var(--control-accent));
+  }
+
+  &[data-state='active'] {
+    color: var(--tabs-trigger-text-active, var(--control-accent));
+    box-shadow: inset 0 -1px 0 0 currentColor;
+  }
+
+  &:focus-visible {
+    position: relative;
+    @mixin focus;
+  }
+}
+
+.Content {
+  flex-grow: 1;
+  padding: var(--tabs-panel-padding, var(--surface-padding));
+  background-color: var(--tabs-panel-bg, var(--bg-panel));
+  border-bottom-left-radius: var(--tabs-panel-radius, var(--radius-tabs));
+  border-bottom-right-radius: var(--tabs-panel-radius, var(--radius-tabs));
+  outline: none;
+  box-shadow: var(--tabs-panel-shadow, var(--surface-shadow));
+  border: 1px solid var(--tabs-panel-border, var(--navigation-border));
+  border-top: 0;
+
+  &:focus-visible {
+    @mixin focus;
+  }
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface TextProps extends React.HtmlHTMLAttributes<HTMLElement> {
+    as?: 'span' | 'label' | 'p' | 'div';
+    size?: 'small' | 'medium' | 'large' | 'default';
+    children: React.ReactNode;
+}
+declare const Text: ({ as: Component, size, children, ...props }: TextProps) => React.JSX.Element;
+export { Text };

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

@@ -0,0 +1,24 @@
+.Root {
+  font-family: var(--text-font-family, var(--typography-font-family));
+  font-weight: var(--text-font-weight, var(--typography-font-weight));
+  font-size: var(--text-font-size, var(--typography-font-size));
+  line-height: var(--text-line-height, var(--typography-line-height));
+  color: var(--text-color, var(--typography-color));
+  margin-bottom: var(--text-margin-bottom, 0);
+
+  &.default {
+    font-size: var(--text-font-size, var(--typography-font-size));
+  }
+
+  &.small {
+    font-size: var(--text-font-size-small, var(--typography-small-size));
+  }
+
+  &.medium {
+    font-size: var(--text-font-size, var(--typography-font-size));
+  }
+
+  &.large {
+    font-size: var(--text-font-size-large, var(--typography-large-size));
+  }
+}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

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

@@ -0,0 +1,34 @@
+@import '../components/helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  font-family: var(--textarea-font-family, var(--field-font-family));
+  display: flex;
+  color: var(--textarea-text, var(--field-text));
+  padding: var(--textarea-padding-y, var(--field-padding-y))
+    var(--textarea-padding-x, var(--field-padding-x));
+  min-height: var(--textarea-min-height, --spacing(20));
+  border-radius: var(--textarea-radius, var(--field-radius));
+  font-size: var(--textarea-font-size, var(--field-font-size));
+  box-shadow: var(--textarea-shadow, var(--field-shadow));
+  font-weight: var(--textarea-font-weight, var(--field-font-weight));
+  line-height: var(--textarea-line-height, var(--field-line-height));
+  background-color: var(--textarea-bg, var(--field-bg));
+  transition: var(--transition-normal);
+  border: 1px solid var(--textarea-border, var(--field-border));
+  width: 100%;
+
+  &::placeholder {
+    color: var(--textarea-placeholder, var(--field-text-placeholder));
+  }
+
+  &:focus-visible {
+    @mixin focus;
+    border-color: var(--textarea-border-focus, var(--field-border-focus));
+    background-color: var(--textarea-bg-focus, var(--field-bg-focus));
+  }
+
+  &:disabled {
+    @mixin disabled;
+  }
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+declare const Provider: React.FC<ToastPrimitives.ToastProviderProps>;
+declare const Viewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const Root: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const Action: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Title: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Description: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Close: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type ToastProps = React.ComponentPropsWithoutRef<typeof Root>;
+type ToastActionElement = React.ReactElement<typeof Action>;
+export declare const Toast: {
+    Provider: React.FC<ToastPrimitives.ToastProviderProps>;
+    Viewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+    Root: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    Action: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Provider, Viewport, Root, Action, Title, Description, Close, ToastProps, ToastActionElement, };

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

@@ -0,0 +1,133 @@
+@import '../components/helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Viewport {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--toast-viewport-padding, var(--notification-padding));
+  gap: var(--toast-viewport-gap, var(--notification-gap));
+  width: var(--toast-width, --spacing(96));
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: var(--toast-z-index, 2147483647);
+  outline: none;
+}
+
+.Root {
+  position: relative;
+  background-color: var(--toast-bg, var(--notification-bg));
+  border: 1px solid var(--toast-border, var(--notification-border));
+  border-radius: var(--toast-radius, var(--notification-radius));
+  box-shadow: var(--toast-shadow, var(--notification-shadow));
+  padding: var(--toast-padding, var(--notification-padding));
+  display: grid;
+  grid-template-areas: 'title action' 'description action';
+  grid-template-columns: auto max-content;
+  column-gap: var(--toast-gap, var(--notification-gap));
+  align-items: center;
+  color: var(--toast-text, var(--notification-text));
+
+  &:hover {
+    .Close {
+      opacity: 1;
+    }
+  }
+
+  &[data-state='open'] {
+    animation: slideIn var(--transition-duration-normal)
+      var(--transition-easing);
+  }
+
+  &[data-state='closed'] {
+    animation: hide var(--transition-duration-normal) ease-in;
+  }
+
+  &[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform var(--transition-duration-normal) ease-out;
+  }
+
+  &[data-swipe='end'] {
+    animation: swipeOut var(--transition-duration-normal) ease-out;
+  }
+}
+
+.Action {
+  grid-area: action;
+}
+
+.Close {
+  font-family: inherit;
+  border-radius: var(--notification-radius);
+  height: var(--toast-close-size, --spacing(6));
+  width: var(--toast-close-size, --spacing(6));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--toast-close-color, var(--typography-auxiliary-color));
+  position: absolute;
+  top: --spacing(2);
+  right: --spacing(2);
+  opacity: 0;
+  transition: var(--transition-normal);
+
+  &:focus-visible {
+    @mixin focus;
+  }
+
+  svg {
+    height: var(--toast-close-icon-size, var(--icon-size-md));
+    width: var(--toast-close-icon-size, var(--icon-size-md));
+  }
+}
+
+.Title {
+  grid-area: title;
+  margin-bottom: --spacing(2);
+  font-weight: var(--toast-title-weight, var(--heading-font-weight));
+  color: var(--toast-text, var(--notification-text));
+  font-size: var(--toast-title-size, var(--typography-font-size));
+}
+
+.Description {
+  grid-area: description;
+  margin: 0;
+  color: var(--toast-description-color, var(--typography-color));
+  font-size: calc(var(--typography-font-size) - --spacing(1));
+  line-height: var(--typography-line-height);
+}
+
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(calc(100% + var(--toast-viewport-padding)));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes swipeOut {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + var(--toast-viewport-padding)));
+  }
+}

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function Toaster(): React.JSX.Element;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+declare const Root: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Toggle: {
+    Root: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Root };

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

@@ -0,0 +1,32 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+.Root {
+  background-color: var(--toggle-bg, var(--control-bg));
+  color: var(--toggle-text, var(--control-text));
+  height: var(--toggle-size, var(--control-toggle-size));
+  min-width: var(--toggle-size, var(--control-toggle-size));
+  padding: var(--toggle-padding-y, --spacing(1))
+    var(--toggle-padding-x, --spacing(2));
+  border-radius: var(--toggle-radius, var(--control-radius));
+  display: flex;
+  font-size: var(--toggle-font-size, var(--typography-font-size));
+  line-height: var(--toggle-line-height, var(--typography-line-height-none));
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--toggle-shadow, var(--control-shadow));
+  transition: var(--transition-fast);
+
+  &:hover {
+    background-color: var(--toggle-bg-hover, var(--bg-active));
+  }
+
+  &[data-state='on'] {
+    background-color: var(--toggle-bg-active, var(--control-accent));
+    color: var(--toggle-text-active, var(--control-text-contrast));
+  }
+
+  &:focus-visible {
+    @mixin focus;
+  }
+}