@kalink-ui/seedly 0.9.0 → 0.11.0

package/src/components/scroll-area/scroll-bar.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import {
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+} from '@radix-ui/react-scroll-area';
+import { clsx } from 'clsx';
+import { ComponentPropsWithRef } from 'react';
+
+import {
+  scrollAreaScrollbar,
+  ScrollAreaScrollbarVariants,
+  scrollAreaThumb,
+} from './scroll-area.css';
+
+export type ScrollAreaScrollbarProps = ComponentPropsWithRef<
+  typeof ScrollAreaScrollbar
+> &
+  ScrollAreaScrollbarVariants;
+
+export function ScrollBar({
+  ref,
+  className,
+  orientation = 'vertical',
+  ...props
+}: ScrollAreaScrollbarProps) {
+  return (
+    <ScrollAreaScrollbar
+      ref={ref}
+      orientation={orientation}
+      className={clsx(scrollAreaScrollbar({ orientation }), className)}
+      {...props}
+    >
+      <ScrollAreaThumb className={scrollAreaThumb} />
+    </ScrollAreaScrollbar>
+  );
+}

package/src/components/seed/seed.tsx

@@ -1,6 +1,6 @@
 import { type PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
-import { ComponentType, type ElementType } from 'react';
+import { type ElementType } from 'react';
 
 import {
   extractSprinklesProps,
@@ -19,10 +19,10 @@ export type SeedProps<
   TSprinklesFn extends SprinklesFnBase,
 > = PolymorphicComponentProps<TUse> & GetSprinkles<TSprinklesFn>;
 
-export type CreateSeedParams<SprinklesFn> = {
+export interface CreateSeedParams<SprinklesFn> {
   sprinkles: SprinklesFn;
   defaultClassName?: string;
-};
+}
 
 export function plantSeed<SprinklesFn extends SprinklesFnBase>({
   sprinkles,
@@ -57,7 +57,7 @@ export function withSeed<SprinklesFn extends SprinklesFnBase>({
   defaultClassName,
 }: CreateSeedParams<SprinklesFn>) {
   return function wrapWithSprinkles<TProps, TUse extends ElementType>(
-    WrappedComponent: ComponentType<PolymorphicComponentProps<TUse> & TProps>,
+    WrappedComponent: ElementType<PolymorphicComponentProps<TUse> & TProps>,
   ) {
     const ComponentWithSeed = (
       props: SeedProps<TUse, SprinklesFn> & TProps,

package/src/components/select/index.ts

@@ -0,0 +1,5 @@
+export { SelectContent } from './select-content';
+export { Select } from './select';
+export { SelectItem } from './select-item';
+export { SelectRoot } from './select-root';
+export { SelectTrigger } from './select-trigger';

package/src/components/select/select-content.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const selectContent = style({
+  '@layer': {
+    [components]: {
+      backgroundColor: sys.color.background,
+    },
+  },
+});
+
+export const selectContentViewport = style({
+  '@layer': {
+    [components]: {
+      height: 'auto',
+      maxHeight: 'var(--radix-select-content-available-height)',
+      minWidth: 'var(--radix-select-trigger-width)',
+    },
+  },
+});

package/src/components/select/select-content.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Portal, Content, Viewport } from '@radix-ui/react-select';
+import { clsx } from 'clsx';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { popoverContent } from '../popover';
+import { ScrollArea } from '../scroll-area';
+
+import { SelectProps } from './select';
+import { selectContent, selectContentViewport } from './select-content.css';
+
+export type SelectContentProps = ComponentPropsWithRef<typeof Content> & {
+  container?: SelectProps['container'];
+};
+
+export interface SelectContentPortalProps {
+  children: ReactNode;
+  container?: SelectProps['container'];
+}
+
+const SelectContentPortal = ({
+  children,
+  container,
+}: SelectContentPortalProps) => {
+  if (container === false) {
+    return children;
+  }
+
+  return <Portal container={container}>{children}</Portal>;
+};
+
+export function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  container,
+  ...props
+}: SelectContentProps) {
+  return (
+    <SelectContentPortal container={container}>
+      <Content position={position} asChild {...props}>
+        <div className={clsx(selectContent, popoverContent())}>
+          <Viewport className={selectContentViewport}>
+            <ScrollArea maxHeight="16rem">{children}</ScrollArea>
+          </Viewport>
+        </div>
+      </Content>
+    </SelectContentPortal>
+  );
+}

package/src/components/select/select-item.css.ts

@@ -0,0 +1,24 @@
+import { style } from '@vanilla-extract/css';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+export const selectItemIndicator = style({
+  '@layer': {
+    [components]: {
+      position: 'absolute',
+      top: '50%',
+      insetInlineStart: sys.spacing[2],
+
+      transform: 'translateY(-50%) translateX(-50%)',
+
+      '::before': {
+        content: '\u2022',
+
+        display: 'inline-block',
+
+        fontSize: '1em',
+      },
+    },
+  },
+});

package/src/components/select/select-item.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Item, ItemIndicator, ItemText } from '@radix-ui/react-select';
+import { clsx } from 'clsx';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+import { menuItem } from '../menu';
+
+import { selectItemIndicator } from './select-item.css';
+
+export type SelectItemProps = ComponentPropsWithoutRef<typeof Item> & {
+  indicator?: ReactNode;
+};
+
+export function SelectItem({ children, indicator, ...props }: SelectItemProps) {
+  return (
+    <Item className={clsx(menuItem({ inset: true }))} {...props}>
+      <ItemIndicator asChild>
+        {indicator || <div className={selectItemIndicator} />}
+      </ItemIndicator>
+      <ItemText>{children}</ItemText>
+    </Item>
+  );
+}

package/src/components/select/select-root.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { Root } from '@radix-ui/react-select';
+import { ComponentPropsWithRef } from 'react';
+
+import { useFormFieldContext } from '../form-field';
+
+export type SelectRootProps = ComponentPropsWithRef<typeof Root>;
+
+export function SelectRoot(props: SelectRootProps) {
+  const { name } = useFormFieldContext();
+
+  return <Root name={name} {...props} />;
+}

package/src/components/select/select-trigger.css.ts

@@ -0,0 +1,75 @@
+import { style } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { sys, transition } from '../../styles';
+import { components } from '../../styles/layers.css';
+import { inputAppearance } from '../input/input.css';
+
+export const selectTrigger = style([
+  inputAppearance(),
+  {
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        alignItems: 'stretch',
+        gap: sys.spacing[4],
+        justifyContent: 'flex-start',
+
+        ':before': {
+          content: '\x00',
+          width: 0,
+          overflow: 'hidden',
+          marginInlineEnd: calc.negate(sys.spacing[4]),
+        },
+      },
+    },
+  },
+]);
+
+export const openIndicator = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        aspectRatio: '1 / 1',
+        marginInlineStart: 'auto',
+
+        transition: transition(['transform'], {
+          duration: 'short.2',
+          easing: 'standard',
+        }),
+
+        selectors: {
+          '[data-state="open"] &': {
+            transform: 'rotate(180deg)',
+          },
+        },
+      },
+    },
+  },
+
+  variants: {
+    fallback: {
+      true: {
+        '@layer': {
+          [components]: {
+            '::after': {
+              content: '""',
+              display: 'block',
+
+              height: 12,
+              width: 12,
+
+              borderTop: `2px solid currentcolor`,
+              borderRight: `2px solid currentcolor`,
+              transform: 'rotate(135deg) translateX(-25%) translateY(25%)',
+            },
+          },
+        },
+      },
+    },
+  },
+});

package/src/components/select/select-trigger.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Trigger, Icon } from '@radix-ui/react-select';
+import { clsx } from 'clsx';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { buttonRecipe } from '../button/button.css';
+import { useFormFieldItemContext, useFormFieldContext } from '../form-field';
+
+import { openIndicator, selectTrigger } from './select-trigger.css';
+
+export type SelectTriggerProps = ComponentPropsWithRef<typeof Trigger> & {
+  icon?: ReactNode;
+};
+
+export function SelectTrigger({
+  className,
+  children,
+  icon = null,
+  ...props
+}: SelectTriggerProps) {
+  const { errors, label } = useFormFieldContext();
+  const { id } = useFormFieldItemContext();
+
+  return (
+    <Trigger
+      id={id}
+      className={clsx(selectTrigger, className)}
+      aria-invalid={errors ? 'true' : undefined}
+      aria-label={label}
+      {...props}
+    >
+      {children}
+      <Icon asChild>
+        <div
+          // Mimic the Combobox style
+          className={clsx(
+            buttonRecipe({ size: 'sm', variant: 'bare' }),
+            openIndicator({ fallback: !icon }),
+          )}
+        >
+          {icon}
+        </div>
+      </Icon>
+    </Trigger>
+  );
+}

package/src/components/select/select.tsx

@@ -0,0 +1,85 @@
+import { Value } from '@radix-ui/react-select';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+
+import {
+  FormField,
+  FormFieldControl,
+  FormFieldDescription,
+  FormFieldError,
+  FormFieldItem,
+  FormFieldLabel,
+} from '../form-field';
+import { InputAppearanceVariants } from '../input';
+
+import { SelectContent } from './select-content';
+import { SelectRoot } from './select-root';
+import { SelectTrigger } from './select-trigger';
+
+export type SelectProps = ComponentPropsWithoutRef<typeof SelectRoot> &
+  Pick<ComponentPropsWithoutRef<typeof Value>, 'placeholder'> &
+  Pick<
+    ComponentPropsWithRef<typeof SelectTrigger>,
+    'onBlur' | 'onFocus' | 'ref'
+  > &
+  InputAppearanceVariants & {
+    name: string;
+    label: string;
+    description?: string;
+    container?: HTMLElement | null | false;
+    hideLabel?: boolean;
+    errors: string;
+    hideErrorMessage?: boolean;
+  };
+
+export function Select({
+  placeholder,
+  label,
+  children,
+  container,
+  description,
+  name,
+  hideErrorMessage = false,
+  hideLabel = false,
+  disabled,
+  errors,
+  onBlur,
+  onFocus,
+  required,
+  size = 'md',
+  ref,
+  ...props
+}: SelectProps) {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      errors={errors}
+      hideErrorMessage={hideErrorMessage}
+      disabled={disabled}
+      hideLabel={hideLabel}
+    >
+      <FormFieldItem>
+        <FormFieldLabel required={required} disabled={disabled} size={size}>
+          {label}
+        </FormFieldLabel>
+
+        <SelectRoot disabled={disabled} {...props}>
+          <FormFieldControl>
+            <SelectTrigger
+              ref={ref}
+              title={hideLabel ? label : undefined}
+              onBlur={onBlur}
+              onFocus={onFocus}
+              aria-label={hideLabel ? label : undefined}
+            >
+              <Value placeholder={placeholder} className="test" />
+            </SelectTrigger>
+          </FormFieldControl>
+          <SelectContent container={container}>{children}</SelectContent>
+        </SelectRoot>
+        <FormFieldDescription>{description}</FormFieldDescription>
+        <FormFieldError />
+      </FormFieldItem>
+    </FormField>
+  );
+}

package/src/components/sheet/index.ts

@@ -0,0 +1,5 @@
+export { Sheet, SheetTrigger, SheetClose, SheetPortal } from './sheet';
+export { SheetHeader } from './sheet-header';
+export { SheetTitle } from './sheet-title';
+export { SheetDescription } from './sheet-description';
+export { SheetContent } from './sheet-content';

package/src/components/sheet/sheet-content.css.ts

@@ -0,0 +1,143 @@
+import { createVar, keyframes } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+
+const from = createVar();
+const to = createVar();
+const size = createVar();
+
+const enter = keyframes({
+  '0%': {
+    transform: from,
+  },
+
+  '100%': {
+    transform: to,
+  },
+});
+
+const leave = keyframes({
+  '0%': {
+    transform: to,
+  },
+
+  '100%': {
+    transform: from,
+  },
+});
+
+export const sheetContent = recipe({
+  base: {
+    zIndex: 50,
+    maxWidth: '100vw',
+    maxHeight: '100vh',
+
+    position: 'fixed',
+
+    boxShadow: sys.elevation.high,
+
+    animationDuration: sys.motion.duration.medium[2],
+    animationTimingFunction: sys.motion.easing.standard,
+    animationFillMode: 'both',
+
+    selectors: {
+      '&[data-state="open"]': {
+        animationName: enter,
+
+        pointerEvents: 'auto',
+      },
+
+      '&[data-state="closed"]': {
+        animationName: leave,
+
+        pointerEvents: 'none',
+      },
+    },
+  },
+
+  variants: {
+    side: {
+      top: {
+        height: size,
+        width: '100vw',
+
+        insetBlockStart: 0,
+        insetInline: 0,
+
+        vars: {
+          [from]: 'translateY(-100%)',
+          [to]: 'translateY(0)',
+        },
+      },
+      right: {
+        height: '100vh',
+        width: size,
+
+        insetBlock: 0,
+        insetInlineEnd: 0,
+
+        vars: {
+          [from]: 'translateX(100%)',
+          [to]: 'translateX(0)',
+        },
+      },
+      bottom: {
+        height: size,
+        width: '100vw',
+
+        insetBlockEnd: 0,
+        insetInline: 0,
+
+        vars: {
+          [from]: 'translateY(100%)',
+          [to]: 'translateY(0)',
+        },
+      },
+      left: {
+        height: '100vh',
+        width: size,
+
+        insetBlock: 0,
+        insetInlineStart: 0,
+
+        vars: {
+          [from]: 'translateX(-100%)',
+          [to]: 'translateX(0)',
+        },
+      },
+    },
+
+    size: {
+      sm: {
+        vars: {
+          [size]: '300px',
+        },
+      },
+      base: {
+        vars: {
+          [size]: '400px',
+        },
+      },
+      md: {
+        vars: {
+          [size]: '500px',
+        },
+      },
+      lg: {
+        vars: {
+          [size]: '600px',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    side: 'right',
+    size: 'base',
+  },
+});
+
+export type SheetContentVariants = NonNullable<
+  RecipeVariants<typeof sheetContent>
+>;

package/src/components/sheet/sheet-content.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Content, Portal } from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+
+import { Box, BoxProps } from '../box';
+import { ScrollArea } from '../scroll-area';
+
+import { SheetPortal } from './sheet';
+import { sheetContent, SheetContentVariants } from './sheet-content.css';
+import { SheetOverlay } from './sheet-overlay';
+
+export type SheetContentProps<TUse extends ElementType> = BoxProps<TUse> &
+  ComponentPropsWithoutRef<typeof Portal> &
+  SheetContentVariants;
+
+export function SheetContent<TUse extends ElementType>({
+  className,
+  children,
+  container,
+  side,
+  size,
+  ref,
+  ...props
+}: SheetContentProps<TUse>) {
+  return (
+    <SheetPortal container={container}>
+      <SheetOverlay />
+      <Content asChild>
+        <Box
+          ref={ref}
+          variant="solid"
+          className={clsx(sheetContent({ side, size }), className)}
+        >
+          <ScrollArea>
+            <Box {...props}>{children}</Box>
+          </ScrollArea>
+        </Box>
+      </Content>
+    </SheetPortal>
+  );
+}

package/src/components/sheet/sheet-description.tsx

@@ -0,0 +1,21 @@
+import { Description } from '@radix-ui/react-dialog';
+import { ComponentPropsWithRef, ElementType } from 'react';
+
+import { Text, TextProps } from '../text';
+
+type SheetDescriptionPros<TUse extends ElementType> = ComponentPropsWithRef<
+  typeof Description
+> &
+  TextProps<TUse>;
+
+export function SheetDescription<TUse extends ElementType>({
+  ref,
+  children,
+  ...props
+}: SheetDescriptionPros<TUse>) {
+  return (
+    <Description ref={ref} asChild {...props}>
+      <Text>{children}</Text>
+    </Description>
+  );
+}

package/src/components/sheet/sheet-footer.tsx

@@ -0,0 +1,15 @@
+import { ElementType } from 'react';
+
+import { Box, BoxProps } from '../box';
+
+export function SheetFooter<TUse extends ElementType>(props: BoxProps<TUse>) {
+  return (
+    <Box
+      display="flex"
+      flexDirection={{ sm: 'column-reverse', md: 'row' }}
+      justifyContent={{ sm: 'flex-start', md: 'flex-end' }}
+      gap="sm"
+      {...props}
+    />
+  );
+}

package/src/components/sheet/sheet-header.css.ts

@@ -0,0 +1,35 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+
+export const sheetHeader = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    flexWrap: 'nowrap',
+    gap: sys.spacing[4],
+  },
+
+  variants: {
+    side: {
+      top: {
+        flexDirection: 'row',
+      },
+      right: {
+        flexDirection: 'row-reverse',
+      },
+      bottom: {
+        flexDirection: 'row',
+      },
+      left: {
+        flexDirection: 'row',
+      },
+    },
+  },
+});
+
+export const sheetHeaderCloseBtn = style({
+  flexShrink: 0,
+});