@sybilion/uilib 1.0.20

package/src/components/ui/Select/Select.styl

@@ -0,0 +1,321 @@
+.selectTrigger
+  position relative
+  display flex
+  width fit-content
+  align-items center
+  justify-content space-between
+  gap var(--p-1)
+
+  max-width calc(90vw - var(--page-x-padding) * 2)
+  overflow hidden
+
+  padding var(--p-1) var(--p-3)
+  // Match ToggleGroup_item styling
+  border-radius var(--p-4)
+  border none
+  box-shadow none
+  background-color var(--background)
+  font-size var(--text-sm)
+  font-weight 500
+  color var(--foreground)
+  white-space nowrap
+  outline none
+  cursor pointer
+  transition all 0.2s ease-in-out
+
+  // fade complex (non-text) content:
+  &::before
+    position absolute
+    left 60vw
+    content ''
+    display block
+    width var(--page-x-padding)
+    min-width var(--page-x-padding)
+    background-image linear-gradient(to right, transparent, var(--background))
+    height 100%
+    min-height 100%
+    width 20%
+
+  &[aria-expanded="true"]::before
+    display none
+
+  &.darker
+    background-color var(--muted)
+
+  &:hover
+    box-shadow 0 0 0 2px var(--background)
+    // color var(--muted-foreground)
+
+  &[data-size="md"]
+    height 1.75rem
+
+  &[data-size="sm"]
+    height 1.75rem
+    font-size var(--text-xs)
+
+  &[data-size="lg"]
+    height 2.25rem
+    font-size var(--text-sm)
+
+  &[data-placeholder]
+    color var(--muted-foreground)
+
+  &:focus-visible
+    border-color var(--ring)
+
+  &[aria-invalid="true"]
+    border-color var(--destructive)
+
+  &:disabled
+    cursor not-allowed
+    opacity 0.5
+
+  :global([data-slot="select-value"])
+    display flex
+    align-items center
+    gap var(--p-2)
+    overflow hidden
+    text-overflow ellipsis
+    white-space nowrap
+
+  svg
+    pointer-events none
+    flex-shrink 0
+
+    &:not([class*='text-'])
+      color var(--foreground)
+
+    &:not([class*='size-'])
+      width 1rem
+      height 1rem
+
+  :global(.dark) &:not(.darker)
+    background-color var(--background)
+
+    &:hover
+      background-color var(--background-alpha-800)
+
+
+.clear
+  padding 0
+  border none
+  background-color transparent
+  box-shadow none
+
+  &:focus-visible
+    border none
+    box-shadow none
+
+  @media (prefers-color-scheme: dark)
+    background-color transparent
+
+    &:hover
+      background-color transparent
+
+.selectContent
+  position relative
+  z-index 1100
+  min-width 8rem
+  max-height var(--radix-select-content-available-height)
+  // Match Tooltip tooltipContent styling
+  background-color var(--popover)
+  border-radius var(--p-4)
+  box-shadow 0 10px 15px -3px rgba(0, 0, 0, 0.1)
+  border 1px solid var(--border)
+  color var(--popover-foreground)
+  overflow-x hidden
+  overflow-y auto
+  transform-origin var(--radix-select-content-transform-origin)
+
+  &[data-state="open"]
+    animation fadeIn 250ms, zoomIn 100ms
+
+  &[data-state="closed"]
+    animation fadeOut 250ms, zoomOut 100ms
+
+  &[data-side="bottom"]
+    animation fadeIn 250ms, slideInFromTop 100ms
+
+  &[data-side="left"]
+    animation fadeIn 250ms, slideInFromRight 100ms
+
+  &[data-side="right"]
+    animation fadeIn 250ms, slideInFromLeft 100ms
+
+  &[data-side="top"]
+    animation fadeIn 250ms, slideInFromBottom 100ms
+
+.selectContentPopper
+  &[data-side="bottom"]
+    transform translateY(0.25rem)
+
+  &[data-side="left"]
+    transform translateX(-0.25rem)
+
+  &[data-side="right"]
+    transform translateX(0.25rem)
+
+  &[data-side="top"]
+    transform translateY(-0.25rem)
+
+.selectViewport
+  padding var(--p-1)
+
+.selectViewportPopper
+  height var(--radix-select-trigger-height)
+  width 100%
+  min-width var(--radix-select-trigger-width)
+  scroll-margin var(--p-1) 0
+
+.selectLabel
+  padding var(--p-2) var(--p-2)
+  padding-top var(--p-2)
+  padding-bottom var(--p-2)
+  font-size var(--text-xs)
+  color var(--muted-foreground)
+
+.selectItem
+  position relative
+  display flex
+  flex-grow 1
+  width 100%
+  cursor default
+  align-items center
+  gap var(--p-2)
+  padding var(--p-1) var(--p-2)
+  // padding-right var(--p-8)
+  border-radius var(--radius-sm)
+  font-size var(--text-sm)
+  outline none
+  user-select none
+
+  &.selected
+    font-weight 600
+    background-color var(--accent)
+
+  &:first-child
+    border-top-left-radius var(--p-3)
+    border-top-right-radius var(--p-3)
+
+  &:last-child
+    border-bottom-left-radius var(--p-3)
+    border-bottom-right-radius var(--p-3)
+
+  &:focus
+    background-color var(--accent)
+    color var(--accent-foreground)
+
+  &[data-disabled]
+    pointer-events none
+    opacity 0.5
+
+  svg
+    pointer-events none
+    flex-shrink 0
+
+    &:not([class*='text-'])
+      color var(--muted-foreground)
+
+    &:not([class*='size-'])
+      width 1rem
+      height 1rem
+
+  span
+    display flex
+    width 100%
+    flex-grow 1
+
+  span:last-child
+    display flex
+    align-items center
+    gap var(--p-2)
+
+.selectItemText
+  display flex
+  align-items center
+  gap var(--p-1)
+
+.selectItemIndicatorContainer
+  position absolute
+  right 0
+  display flex
+  align-items center
+  justify-content center
+  width var(--p-8)
+  height var(--p-8)
+
+.selectItemIndicator
+  width 1rem
+  height 1rem
+
+.selectSeparator
+  pointer-events none
+  margin -0.25rem var(--p-1) var(--p-1)
+  height 1px
+  background-color var(--border)
+
+.selectScrollButton
+  display flex
+  cursor default
+  align-items center
+  justify-content center
+  padding var(--p-1) 0
+
+.selectIcon
+  width 1rem
+  height 1rem
+  opacity 0.5
+  margin-right calc(var(--p-1) * -1)
+
+.selectScrollIcon
+  width 1rem
+  height 1rem
+
+@keyframes fadeIn
+  from
+    opacity 0
+  to
+    opacity 1
+
+@keyframes fadeOut
+  from
+    opacity 1
+  to
+    opacity 0
+
+@keyframes zoomIn
+  from
+    transform scale(0.95)
+  to
+    transform scale(1)
+
+@keyframes zoomOut
+  from
+    transform scale(1)
+  to
+    transform scale(0.95)
+
+@keyframes slideInFromTop
+  from
+    transform translateY(-0.5rem)
+  to
+    transform translateY(.2)
+
+@keyframes slideInFromBottom
+  from
+    transform translateY(0.5rem)
+  to
+    transform translateY(.2)
+
+@keyframes slideInFromLeft
+  from
+    transform translateX(-0.5rem)
+  to
+    transform translateX(.2)
+
+@keyframes slideInFromRight
+  from
+    transform translateX(0.5rem)
+  to
+    transform translateY(.2)
+

package/src/components/ui/Select/Select.styl.d.ts

@@ -0,0 +1,31 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'clear': string;
+  'darker': string;
+  'fadeIn': string;
+  'fadeOut': string;
+  'selectContent': string;
+  'selectContentPopper': string;
+  'selectIcon': string;
+  'selectItem': string;
+  'selectItemIndicator': string;
+  'selectItemIndicatorContainer': string;
+  'selectItemText': string;
+  'selectLabel': string;
+  'selectScrollButton': string;
+  'selectScrollIcon': string;
+  'selectSeparator': string;
+  'selectTrigger': string;
+  'selectViewport': string;
+  'selectViewportPopper': string;
+  'selected': string;
+  'slideInFromBottom': string;
+  'slideInFromLeft': string;
+  'slideInFromRight': string;
+  'slideInFromTop': string;
+  'zoomIn': string;
+  'zoomOut': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Select/Select.tsx

@@ -0,0 +1,169 @@
+import cn from 'classnames';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+
+import S from './Select.styl';
+import type {
+  SelectContentProps,
+  SelectGroupProps,
+  SelectItemProps,
+  SelectLabelProps,
+  SelectProps,
+  SelectScrollDownButtonProps,
+  SelectScrollUpButtonProps,
+  SelectSeparatorProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from './Select.types';
+
+function Select({
+  variant = 'default',
+  ...props
+}: SelectProps & { variant?: 'default' | 'clear' }) {
+  return (
+    <SelectPrimitive.Root
+      data-slot="select"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+function SelectGroup({ ...props }: SelectGroupProps) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: SelectValueProps) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = 'md',
+  variant = 'default',
+  darker = false,
+  children,
+  hideChevron = false,
+  ...props
+}: SelectTriggerProps) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      data-variant={variant}
+      className={cn(S.selectTrigger, darker && S.darker, className)}
+      {...props}
+    >
+      {children}
+      {!hideChevron && (
+        <SelectPrimitive.Icon asChild>
+          <ChevronDownIcon className={S.selectIcon} />
+        </SelectPrimitive.Icon>
+      )}
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: SelectContentProps) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          S.selectContent,
+          position === 'popper' && S.selectContentPopper,
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            S.selectViewport,
+            position === 'popper' && S.selectViewportPopper,
+            className,
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  selected,
+  ...props
+}: SelectItemProps) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(S.selectItem, className, selected && S.selected)}
+      {...props}
+    >
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn(S.selectSeparator, className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: SelectScrollUpButtonProps) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(S.selectScrollButton, className)}
+      {...props}
+    >
+      <ChevronUpIcon className={S.selectScrollIcon} />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: SelectScrollDownButtonProps) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(S.selectScrollButton, className)}
+      {...props}
+    >
+      <ChevronDownIcon className={S.selectScrollIcon} />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/components/ui/Select/Select.types.ts

@@ -0,0 +1,40 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+export interface SelectTriggerProps extends React.ComponentProps<
+  typeof SelectPrimitive.Trigger
+> {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'clear';
+  darker?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  hideChevron?: boolean;
+}
+
+export type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;
+export type SelectGroupProps = React.ComponentProps<
+  typeof SelectPrimitive.Group
+>;
+export type SelectValueProps = React.ComponentProps<
+  typeof SelectPrimitive.Value
+>;
+export type SelectContentProps = React.ComponentProps<
+  typeof SelectPrimitive.Content
+>;
+export type SelectLabelProps = React.ComponentProps<
+  typeof SelectPrimitive.Label
+>;
+export type SelectItemProps = React.ComponentProps<
+  typeof SelectPrimitive.Item
+> & {
+  selected?: boolean;
+};
+export type SelectSeparatorProps = React.ComponentProps<
+  typeof SelectPrimitive.Separator
+>;
+export type SelectScrollUpButtonProps = React.ComponentProps<
+  typeof SelectPrimitive.ScrollUpButton
+>;
+export type SelectScrollDownButtonProps = React.ComponentProps<
+  typeof SelectPrimitive.ScrollDownButton
+>;

package/src/components/ui/Select/index.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './Select.types';

package/src/components/ui/Separator/Separator.styl

@@ -0,0 +1,11 @@
+.root
+  flex-shrink 0
+  background-color var(--border)
+
+  &[data-orientation="horizontal"]
+    height 1px
+    width 100%
+
+  &[data-orientation="vertical"]
+    height 100%
+    width 1px

package/src/components/ui/Separator/Separator.styl.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Separator/Separator.tsx

@@ -0,0 +1,25 @@
+import cn from 'classnames';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import S from './Separator.styl';
+import type { SeparatorProps } from './Separator.types';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: SeparatorProps) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(S.root, className)}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/components/ui/Separator/Separator.types.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps } from 'react';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+export interface SeparatorProps extends ComponentProps<
+  typeof SeparatorPrimitive.Root
+> {}

package/src/components/ui/Separator/index.ts

@@ -0,0 +1,2 @@
+export { Separator } from './Separator';
+export type { SeparatorProps } from './Separator.types';