@kalink-ui/seedly 0.9.0 → 0.11.0

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

@@ -0,0 +1,32 @@
+import { ElementType, ReactNode } from 'react';
+
+import { Stack, StackProps } from '../stack';
+
+import { SheetClose } from './sheet';
+import { SheetContentVariants } from './sheet-content.css';
+import { sheetHeader, sheetHeaderCloseBtn } from './sheet-header.css';
+
+type SheetHeaderProps<TUse extends ElementType> = StackProps<TUse> & {
+  side: SheetContentVariants['side'];
+  closeBtn: ReactNode;
+};
+
+export function SheetHeader<TUse extends ElementType>({
+  ref,
+  spacing = 2,
+  children,
+  side,
+  closeBtn,
+  ...props
+}: SheetHeaderProps<TUse>) {
+  return (
+    <div ref={ref} className={sheetHeader({ side })}>
+      <Stack spacing={spacing} {...props}>
+        {children}
+      </Stack>
+      <SheetClose asChild className={sheetHeaderCloseBtn}>
+        {closeBtn}
+      </SheetClose>
+    </div>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+import { sys } from '../../styles';
+
+const enterAnimation = keyframes({
+  '0%': {
+    opacity: 0,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
+const exitAnimation = keyframes({
+  '0%': {
+    opacity: 1,
+  },
+  '100%': {
+    opacity: 0,
+  },
+});
+
+export const sheetOverlay = style({
+  zIndex: 50,
+
+  position: 'fixed',
+  inset: 0,
+
+  backgroundColor: `color(from ${sys.color.background} srgb r g b / 0.5)`,
+
+  animationDuration: sys.motion.duration.medium[2],
+  animationTimingFunction: sys.motion.easing.standard,
+  backdropFilter: 'blur(4px)',
+
+  selectors: {
+    '&[data-state="open"]': {
+      animationName: enterAnimation,
+    },
+    '&[data-state="closed"]': {
+      animationName: exitAnimation,
+    },
+  },
+});

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { Overlay } from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { ComponentPropsWithoutRef } from 'react';
+
+import { sheetOverlay } from './sheet-overlay.css';
+
+export function SheetOverlay({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof Overlay>) {
+  return <Overlay className={clsx(sheetOverlay, className)} {...props} />;
+}

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { Title } from '@radix-ui/react-dialog';
+import { ComponentPropsWithRef } from 'react';
+
+import { Heading, HeadingProps, HeadingTypes } from '../heading';
+
+type SheetTitleProps<TUse extends HeadingTypes> = ComponentPropsWithRef<
+  typeof Title
+> &
+  HeadingProps<TUse>;
+
+export function SheetTitle<TUse extends HeadingTypes>(
+  props: SheetTitleProps<TUse>,
+) {
+  const { use = 'h2', className, children, variant, size, ...rest } = props;
+
+  return (
+    <Title asChild>
+      <Heading
+        use={use as HeadingProps<TUse>['use']}
+        variant={variant}
+        size={size}
+        className={className}
+        {...rest}
+      >
+        {children}
+      </Heading>
+    </Title>
+  );
+}

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';
+
+export const Sheet = Root;
+export const SheetTrigger = Trigger;
+export const SheetClose = Close;
+export const SheetPortal = Portal;

package/src/components/stack/index.ts

@@ -1,2 +1,2 @@
-export { Stack } from './stack';
+export { Stack, type StackProps } from './stack';
 export { stackRecipe, type StackVariants } from './stack.css';

package/src/components/stack/stack.css.ts

@@ -4,7 +4,11 @@ import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 import { sys, mapContractVars } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-const spacing = createVar();
+const spacing = createVar({
+  syntax: '<length>',
+  initialValue: sys.spacing['0'],
+  inherits: false,
+});
 
 export const stackRecipe = recipe({
   base: {

package/src/components/stack/stack.tsx

@@ -4,8 +4,8 @@ import { ElementType } from 'react';
 
 import { stackRecipe, StackVariants } from './stack.css';
 
-type StackProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  StackVariants;
+export type StackProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & StackVariants;
 
 /**
  * A custom element for injecting white space (margin) between flow

package/src/components/text/index.ts

@@ -1 +1,7 @@
 export { Text, type TextProps } from './text';
+export {
+  textRecipe,
+  textAlign,
+  lineClampNumber,
+  type TextVariants,
+} from './text.css';

package/src/components/text/text.css.ts

@@ -3,7 +3,8 @@ import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { components } from '../../styles/layers.css';
 
-const lineClampNumber = createVar();
+export const lineClampNumber = createVar();
+export const textAlign = createVar();
 
 const lineClamp = style({
   '@layer': {
@@ -17,6 +18,17 @@ const lineClamp = style({
 });
 
 export const textRecipe = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        textAlign,
+
+        vars: {
+          [textAlign]: 'inherit',
+        },
+      },
+    },
+  },
   variants: {
     /**
      * Controls the wrapping of the text.
@@ -131,21 +143,36 @@ export const textRecipe = recipe({
       start: {
         '@layer': {
           [components]: {
-            textAlign: 'start',
+            vars: {
+              [textAlign]: 'start',
+            },
           },
         },
       },
       center: {
         '@layer': {
           [components]: {
-            textAlign: 'center',
+            vars: {
+              [textAlign]: 'center',
+            },
           },
         },
       },
       end: {
         '@layer': {
           [components]: {
-            textAlign: 'end',
+            vars: {
+              [textAlign]: 'end',
+            },
+          },
+        },
+      },
+      justify: {
+        '@layer': {
+          [components]: {
+            vars: {
+              [textAlign]: 'justify',
+            },
           },
         },
       },

package/src/components/text-field/index.ts

@@ -0,0 +1 @@
+export { TextField } from './text-field';

package/src/components/text-field/text-field.css.ts

@@ -0,0 +1,3 @@
+import { style } from '@vanilla-extract/css';
+
+export const textFieldStyle = style({});

package/src/components/text-field/text-field.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import {
+  FormField,
+  FormFieldControl,
+  FormFieldDescription,
+  FormFieldError,
+  FormFieldItem,
+  FormFieldLabel,
+} from '../form-field';
+import { Input, InputProps } from '../input';
+
+export type TextFieldProps = InputProps & {
+  name: string;
+  label: string;
+  description?: string;
+  wrapperClassName?: string;
+  hideLabel?: boolean;
+  errors?: string | null;
+  hideErrorMessage?: boolean;
+};
+
+export function TextField({
+  description,
+  disabled,
+  label,
+  name,
+  hideLabel = false,
+  errors,
+  required,
+  hideErrorMessage = false,
+  size = 'md',
+  ...rest
+}: TextFieldProps) {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      errors={errors}
+      hideErrorMessage={hideErrorMessage}
+      disabled={disabled}
+      hideLabel={hideLabel}
+    >
+      <FormFieldItem>
+        <FormFieldLabel required={required} disabled={disabled} size={size}>
+          {label}
+        </FormFieldLabel>
+
+        <FormFieldControl>
+          <Input
+            name={name}
+            disabled={disabled}
+            required={required}
+            size={size}
+            {...rest}
+          />
+        </FormFieldControl>
+
+        <FormFieldDescription>{description}</FormFieldDescription>
+        <FormFieldError />
+      </FormFieldItem>
+    </FormField>
+  );
+}

package/src/components/textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea } from './textarea';

package/src/components/textarea/textarea-input.tsx

@@ -0,0 +1,20 @@
+import { clsx } from 'clsx';
+import { TextareaHTMLAttributes } from 'react';
+
+import { useFormFieldContext } from '../form-field/form-field-context';
+import { textarea } from '../textarea/textarea.css';
+
+export function TextareaInput({
+  className,
+  ...props
+}: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  const { errors } = useFormFieldContext();
+
+  return (
+    <textarea
+      className={clsx(textarea, className)}
+      aria-invalid={errors ? 'true' : undefined}
+      {...props}
+    />
+  );
+}

package/src/components/textarea/textarea.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+
+import { inputAppearance } from '../input';
+
+export const textarea = style([
+  inputAppearance(),
+  {
+    lineHeight: 'auto',
+  },
+]);

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { TextareaHTMLAttributes } from 'react';
+
+import {
+  FormField,
+  FormFieldControl,
+  FormFieldDescription,
+  FormFieldError,
+  FormFieldItem,
+  FormFieldLabel,
+} from '../form-field';
+import { InputProps } from '../input';
+
+import { TextareaInput } from './textarea-input';
+
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
+  InputProps & {
+    name: string;
+    label: string;
+    description?: string;
+    hideLabel?: boolean;
+    errors: string;
+    hideErrorMessage?: boolean;
+  };
+
+export function Textarea({
+  className,
+  description,
+  disabled,
+  label,
+  name,
+  hideLabel = false,
+  errors,
+  required,
+  hideErrorMessage = false,
+  size = 'md',
+  ...rest
+}: TextareaProps) {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      errors={errors}
+      hideErrorMessage={hideErrorMessage}
+      disabled={disabled}
+      hideLabel={hideLabel}
+    >
+      <FormFieldItem>
+        <FormFieldLabel disabled={disabled} required={required} size={size}>
+          {label}
+        </FormFieldLabel>
+
+        <FormFieldControl>
+          <TextareaInput
+            name={name}
+            className={className}
+            disabled={disabled}
+            aria-label={hideLabel ? label : undefined}
+            {...rest}
+          />
+        </FormFieldControl>
+
+        <FormFieldDescription>{description}</FormFieldDescription>
+        <FormFieldError />
+      </FormFieldItem>
+    </FormField>
+  );
+}

package/src/styles/define-responsive-properties.ts

@@ -0,0 +1,242 @@
+import {
+  type ConditionalValue,
+  defineProperties,
+} from '@vanilla-extract/sprinkles';
+
+import { utilities } from './layers.css';
+import { sys } from './system-contract.css';
+
+interface ScreenMediaQueries {
+  sm: `screen and (min-width: ${string}px)`;
+  md: `screen and (min-width: ${string}px)`;
+  lg: `screen and (min-width: ${string}px)`;
+  xl: `screen and (min-width: ${string}px)`;
+}
+
+interface DefineResponsivePropertiesArgs {
+  screen: ScreenMediaQueries;
+}
+
+export const defineResponsiveProperties = ({
+  screen,
+}: DefineResponsivePropertiesArgs) =>
+  defineProperties({
+    '@layer': utilities,
+
+    conditions: {
+      xs: {},
+      sm: { '@media': screen.sm },
+      md: { '@media': screen.md },
+      lg: { '@media': screen.lg },
+      xl: { '@media': screen.xl },
+    },
+
+    defaultCondition: 'xs',
+    responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl'],
+
+    properties: {
+      display: [
+        'none',
+        'block',
+        'inline',
+        'inline-block',
+        'flex',
+        'inline-flex',
+        'grid',
+        'list-item',
+      ],
+      paddingBlockStart: sys.spacing,
+      paddingBlockEnd: sys.spacing,
+      paddingInlineStart: sys.spacing,
+      paddingInlineEnd: sys.spacing,
+
+      marginBlockStart: sys.spacing,
+      marginBlockEnd: sys.spacing,
+      marginInlineStart: sys.spacing,
+      marginInlineEnd: sys.spacing,
+
+      columnGap: sys.spacing,
+      rowGap: sys.spacing,
+
+      flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
+
+      justifyContent: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+      ],
+      alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+      alignSelf: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+
+      position: [
+        'absolute',
+        'relative',
+        'fixed',
+        'sticky',
+        'static',
+        'inherit',
+      ],
+      insetBlockStart: sys.spacing,
+      insetBlockEnd: sys.spacing,
+      insetInlineStart: sys.spacing,
+      insetInlineEnd: sys.spacing,
+
+      textAlign: ['start', 'end', 'center', 'justify'],
+    },
+
+    shorthands: {
+      padding: [
+        'paddingBlockStart',
+        'paddingInlineEnd',
+        'paddingBlockEnd',
+        'paddingInlineStart',
+      ],
+      paddingBlock: ['paddingBlockStart', 'paddingBlockEnd'],
+      paddingInline: ['paddingInlineEnd', 'paddingInlineStart'],
+
+      margin: [
+        'marginBlockStart',
+        'marginInlineEnd',
+        'marginBlockEnd',
+        'marginInlineStart',
+      ],
+      marginBlock: ['marginBlockStart', 'marginBlockEnd'],
+      marginInline: ['marginInlineEnd', 'marginInlineStart'],
+
+      gap: ['rowGap', 'columnGap'],
+
+      inset: [
+        'insetBlockStart',
+        'insetInlineEnd',
+        'insetBlockEnd',
+        'insetInlineStart',
+      ],
+      insetBlock: ['insetBlockStart', 'insetBlockEnd'],
+      insetInline: ['insetInlineEnd', 'insetInlineStart'],
+    },
+  });
+
+type DefineResponsiveProperties = ReturnType<typeof defineResponsiveProperties>;
+
+export type ResponsiveValue<Value extends string | number> = ConditionalValue<
+  DefineResponsiveProperties,
+  Value
+>;
+
+export type DisplayValues =
+  keyof DefineResponsiveProperties['styles']['display']['values'];
+export type JustifyContentValues =
+  keyof DefineResponsiveProperties['styles']['justifyContent']['values'];
+export type AlignItemsValues =
+  keyof DefineResponsiveProperties['styles']['alignItems']['values'];
+export type AlignSelfValues =
+  keyof DefineResponsiveProperties['styles']['alignSelf']['values'];
+export type FlexDirectionValues =
+  keyof DefineResponsiveProperties['styles']['flexDirection']['values'];
+export type ColumnGapValues =
+  keyof DefineResponsiveProperties['styles']['columnGap']['values'];
+export type RowGapValues =
+  keyof DefineResponsiveProperties['styles']['rowGap']['values'];
+
+export type PaddingBlockStartValues =
+  keyof DefineResponsiveProperties['styles']['paddingBlockStart']['values'];
+export type PaddingBlockEndValues =
+  keyof DefineResponsiveProperties['styles']['paddingBlockEnd']['values'];
+export type PaddingInlineStartValues =
+  keyof DefineResponsiveProperties['styles']['paddingInlineStart']['values'];
+export type PaddingInlineEndValues =
+  keyof DefineResponsiveProperties['styles']['paddingInlineEnd']['values'];
+export type MarginBlockStartValues =
+  keyof DefineResponsiveProperties['styles']['marginBlockStart']['values'];
+export type MarginBlockEndValues =
+  keyof DefineResponsiveProperties['styles']['marginBlockEnd']['values'];
+export type MarginInlineStartValues =
+  keyof DefineResponsiveProperties['styles']['marginInlineStart']['values'];
+export type MarginInlineEndValues =
+  keyof DefineResponsiveProperties['styles']['marginInlineEnd']['values'];
+
+export type PositionValues =
+  keyof DefineResponsiveProperties['styles']['position']['values'];
+export type InsetBlockStartValues =
+  keyof DefineResponsiveProperties['styles']['insetBlockStart']['values'];
+export type InsetBlockEndValues =
+  keyof DefineResponsiveProperties['styles']['insetBlockEnd']['values'];
+export type InsetInlineStartValues =
+  keyof DefineResponsiveProperties['styles']['insetInlineStart']['values'];
+export type InsetInlineEndValues =
+  keyof DefineResponsiveProperties['styles']['insetInlineEnd']['values'];
+
+export type TextAlignValues =
+  keyof DefineResponsiveProperties['styles']['textAlign']['values'];
+
+export interface ResponsiveProperties {
+  /** Mapped to `display` css property */
+  display?: ResponsiveValue<DisplayValues>;
+  /** Mapped to `flex-direction` css property */
+  flexDirection?: ResponsiveValue<FlexDirectionValues>;
+  /** Mapped to `justify-content` css property */
+  justifyContent?: ResponsiveValue<JustifyContentValues>;
+  /** Mapped to `align-items` css property */
+  alignItems?: ResponsiveValue<AlignItemsValues>;
+  /** Mapped to `align-self` css property */
+  alignSelf?: ResponsiveValue<AlignSelfValues>;
+  /** Mapped to `column-gap` css property */
+  columnGap?: ResponsiveValue<ColumnGapValues>;
+  /** Mapped to `row-gap` css property */
+  rowGap?: ResponsiveValue<RowGapValues>;
+  /** Mapped to `gap` css property */
+  gap?: ResponsiveValue<ColumnGapValues | RowGapValues>;
+
+  /** Mapped to `padding-block-start` css property */
+  paddingBlockStart?: ResponsiveValue<PaddingBlockStartValues>;
+  /** Mapped to `padding-block-end` css property */
+  paddingBlockEnd?: ResponsiveValue<PaddingBlockEndValues>;
+  /** Mapped to `padding-inline-start` css property */
+  paddingInlineStart?: ResponsiveValue<PaddingInlineStartValues>;
+  /** Mapped to `padding-inline-end` css property */
+  paddingInlineEnd?: ResponsiveValue<PaddingInlineEndValues>;
+  /** Mapped to `padding` css property */
+  padding?: ResponsiveValue<PaddingBlockStartValues | PaddingInlineStartValues>;
+  /** Mapped to `padding-block` css property */
+  paddingBlock?: ResponsiveValue<
+    PaddingBlockStartValues | PaddingBlockEndValues
+  >;
+  /** Mapped to `padding-inline` css property */
+  paddingInline?: ResponsiveValue<
+    PaddingInlineStartValues | PaddingInlineEndValues
+  >;
+
+  /** Mapped to `margin-block-start` css property */
+  marginBlockStart?: ResponsiveValue<MarginBlockStartValues>;
+  /** Mapped to `margin-block-end` css property */
+  marginBlockEnd?: ResponsiveValue<MarginBlockEndValues>;
+  /** Mapped to `margin-inline-start` css property */
+  marginInlineStart?: ResponsiveValue<MarginInlineStartValues>;
+  /** Mapped to `margin-inline-end` css property */
+  marginInlineEnd?: ResponsiveValue<MarginInlineEndValues>;
+  /** Mapped to `margin` css property */
+  margin?: ResponsiveValue<MarginBlockStartValues | MarginInlineStartValues>;
+  /** Mapped to `margin-block` css property */
+  marginBlock?: ResponsiveValue<MarginBlockStartValues | MarginBlockEndValues>;
+  /** Mapped to `margin-inline` css property */
+  marginInline?: ResponsiveValue<
+    MarginInlineStartValues | MarginInlineEndValues
+  >;
+
+  /** Mapped to `position` css property */
+  position?: ResponsiveValue<PositionValues>;
+
+  /** Mapped to `inset-block-start` css property */
+  insetBlockStart?: ResponsiveValue<InsetBlockStartValues>;
+  /** Mapped to `inset-block-end` css property */
+  insetBlockEnd?: ResponsiveValue<InsetBlockEndValues>;
+  /** Mapped to `inset-inline-start` css property */
+  insetInlineStart?: ResponsiveValue<InsetInlineStartValues>;
+  /** Mapped to `inset-inline-end` css property */
+  insetInlineEnd?: ResponsiveValue<InsetInlineEndValues>;
+
+  /** Mapped to `text-align` css property */
+  textAlign?: ResponsiveValue<TextAlignValues>;
+}