@_linked/primitives 1.0.5

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

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

@@ -0,0 +1,55 @@
+@import '@_linked/css/package.css';
+
+.Root {
+  position: relative;
+  overflow: hidden;
+}
+
+.Viewport {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.Scrollbar {
+  display: flex;
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+  padding: var(--scrollarea-padding, --spacing(0.5));
+  background: var(--scrollarea-track-bg, var(--border-default));
+  transition: background 160ms ease-out;
+
+  &:hover {
+    background: var(--scrollarea-track-bg-hover, var(--border-hover));
+  }
+
+  &[data-orientation='vertical'] {
+    width: var(--scrollbar-size, 10px);
+  }
+  &[data-orientation='horizontal'] {
+    flex-direction: column;
+    height: var(--scrollbar-size, 10px);
+  }
+}
+
+.Thumb {
+  flex: 1;
+  background: var(--scrollarea-thumb-bg, var(--border-active));
+  border-radius: var(--scrollarea-thumb-radius, 9999px);
+  position: relative;
+
+  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    min-width: 44px;
+    min-height: 44px;
+  }
+}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+declare const Root: React.FC<SelectPrimitive.SelectProps>;
+declare const Group: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Value: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+interface TriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+    size?: 'small' | 'medium' | 'large' | 'default';
+}
+declare const Trigger: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Separator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Select: {
+    Root: React.FC<SelectPrimitive.SelectProps>;
+    Group: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Value: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+    Trigger: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    ScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    ScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Root, Group, Value, Trigger, Content, Label, Item, Separator, ScrollUpButton, ScrollDownButton, };