@speakeasy-api/moonshine 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/components/Select/index.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+
+import { cn } from '../../lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-full w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap normal-case shadow-sm focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

package/src/components/Separator/index.tsx

@@ -0,0 +1,23 @@
+import { cn } from '../../lib/utils'
+import { Orientation } from '../../types'
+
+export interface SeparatorProps {
+  orientation?: Orientation
+  className?: string
+}
+
+export function Separator({
+  orientation = 'horizontal',
+  className,
+}: SeparatorProps) {
+  return (
+    <div
+      className={cn(
+        orientation === 'horizontal'
+          ? 'bg-border h-[1px] w-full'
+          : 'bg-border h-full w-[1px]',
+        className
+      )}
+    />
+  )
+}

package/src/components/Skeleton/index.tsx

@@ -0,0 +1,61 @@
+import { Children, cloneElement, isValidElement } from 'react'
+import { cn } from '../../lib/utils'
+import './skeleton.css'
+
+export interface SkeletonProps {
+  /**
+   * The children to display in the skeleton.
+   * The width and content of each child will be used to determine the width of the skeleton.
+   *
+   * @example
+   * <Skeleton>
+   *   <div>foo</div>
+   *   <div>bar</div>
+   * </Skeleton>
+   *
+   * You can also provide no content and use classNames to style the skeleton items:
+   *
+   * @example
+   * <Skeleton>
+   *   <div className="h-5 w-48 rounded-lg" />
+   *   <div className="h-5 w-96 rounded-lg" />
+   *   <div className="h-5 w-48 rounded-lg" />
+   * </Skeleton>
+   */
+  children: React.ReactNode
+  /**
+   * The class name to apply to each child.
+   */
+  className?: string
+}
+
+export function Skeleton({ children, className }: SkeletonProps) {
+  return (
+    <div className="flex w-full flex-col items-start gap-2.5 select-none">
+      {Children.toArray(children).map((child, index) => {
+        if (typeof child === 'string') {
+          return (
+            <div
+              key={index}
+              className="skeleton h-5 max-w-max min-w-36 rounded-lg text-transparent"
+            >
+              {child}
+            </div>
+          )
+        }
+
+        if (isValidElement(child))
+          return cloneElement<HTMLElement>(
+            child as React.ReactElement<HTMLElement>,
+            {
+              className: cn(
+                'skeleton max-w-full text-transparent h-5 rounded-lg',
+                className,
+                child.props.className
+              ),
+            }
+          )
+      })}
+    </div>
+  )
+}

package/src/components/Skeleton/skeleton.css

@@ -0,0 +1,52 @@
+@reference '../../global.css';
+
+/* light */
+:root {
+  --skeleton-animation-duration: 2s;
+  --skeleton-animation-delay: 0s;
+  --skeleton-animation-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --skeleton-animation-direction: to right;
+  --skeleton-animation-background-color-1: rgba(0, 0, 0, 0.01);
+  --skeleton-animation-background-color-2: rgba(0, 0, 0, 0.03);
+  --skeleton-animation-background-color-start: rgba(0, 0, 0, 0);
+  --skeleton-animation-background-color-end: rgba(0, 0, 0, 0);
+}
+
+.dark {
+  /* dark */
+  --skeleton-animation-background-color-1: rgba(255, 255, 255, 0.03);
+  --skeleton-animation-background-color-2: rgba(255, 255, 255, 0.07);
+  --skeleton-animation-background-color-start: rgba(255, 255, 255, 0);
+  --skeleton-animation-background-color-end: rgba(255, 255, 255, 0);
+}
+
+.skeleton {
+  position: relative;
+  overflow: hidden;
+
+  @apply bg-muted;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      var(--skeleton-animation-background-color-start) 0,
+      var(--skeleton-animation-background-color-1) 20%,
+      var(--skeleton-animation-background-color-2) 60%,
+      var(--skeleton-animation-background-color-end)
+    );
+    animation: skeleton-shimmer var(--skeleton-animation-duration) infinite;
+    content: '';
+  }
+}
+
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/components/Stack/index.tsx

@@ -0,0 +1,137 @@
+import React from 'react'
+import { cn, getResponsiveClasses } from '../../lib/utils'
+import { Gap, Padding, ResponsiveValue } from '../../types'
+import {
+  gapMapper,
+  paddingMapper,
+  wrapMapper,
+} from '../../lib/responsiveMappers'
+
+type StackDirection = 'horizontal' | 'vertical'
+type StackAlign = 'stretch' | 'start' | 'center' | 'end' | 'baseline'
+type StackJustify =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'space-between'
+  | 'space-evenly'
+type StackWrap = 'wrap' | 'nowrap'
+type TailwindJustify =
+  | 'justify-start'
+  | 'justify-center'
+  | 'justify-end'
+  | 'justify-between'
+  | 'justify-evenly'
+type TailwindAlign =
+  | 'items-start'
+  | 'items-center'
+  | 'items-end'
+  | 'items-baseline'
+  | 'items-stretch'
+type TailwindDirection = 'flex-row' | 'flex-col'
+
+export interface StackProps {
+  children: React.ReactNode
+
+  /** Specify the orientation for the stack container */
+  direction?: ResponsiveValue<StackDirection>
+
+  /** Specify the gap between children elements in the stack */
+  gap?: ResponsiveValue<Gap>
+
+  /** Specify the padding of the stack container */
+  padding?: ResponsiveValue<Padding>
+
+  /** Specify the alignment between items in the cross-axis of the orientation */
+  align?: ResponsiveValue<StackAlign>
+
+  /** Specify how items will be distributed in the stacking direction */
+  justify?: ResponsiveValue<StackJustify>
+
+  /** Specify whether items are forced onto one line or can wrap */
+  wrap?: ResponsiveValue<StackWrap>
+
+  className?: string
+}
+
+export function Stack({
+  children,
+  direction = 'vertical',
+  gap = 0,
+  padding = 0,
+  align = 'stretch',
+  justify = 'start',
+  wrap = 'nowrap',
+  className,
+}: StackProps) {
+  const alignMapper = (val: StackAlign): TailwindAlign => {
+    switch (val) {
+      case 'start':
+        return 'items-start'
+      case 'center':
+        return 'items-center'
+      case 'end':
+        return 'items-end'
+      case 'baseline':
+        return 'items-baseline'
+      default:
+        return 'items-stretch'
+    }
+  }
+
+  const justifyMapper = (val: StackJustify): TailwindJustify => {
+    switch (val) {
+      case 'start':
+        return 'justify-start'
+      case 'center':
+        return 'justify-center'
+      case 'end':
+        return 'justify-end'
+      case 'space-between':
+        return 'justify-between'
+      case 'space-evenly':
+        return 'justify-evenly'
+      default:
+        return 'justify-start'
+    }
+  }
+
+  const directionToFlexMapper = (val: StackDirection): TailwindDirection => {
+    return val === 'horizontal' ? 'flex-row' : 'flex-col'
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex',
+        getResponsiveClasses(direction, directionToFlexMapper),
+        getResponsiveClasses(gap, gapMapper),
+        getResponsiveClasses(padding, paddingMapper),
+        getResponsiveClasses(wrap, wrapMapper),
+        getResponsiveClasses(align, alignMapper),
+        getResponsiveClasses(justify, justifyMapper),
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface StackItemProps {
+  children: React.ReactNode
+  /** Allow item to keep size or expand to fill the available space */
+  grow?: ResponsiveValue<boolean>
+  className?: string
+}
+
+Stack.Item = function StackItem({ children, grow, className }: StackItemProps) {
+  const growMapper = (val: boolean) => (val ? 'flex-1' : 'flex-initial')
+  return (
+    <div
+      className={cn(getResponsiveClasses(grow ?? false, growMapper), className)}
+    >
+      {children}
+    </div>
+  )
+}