@kalink-ui/seedly 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @kalink-ui/seedly
 
+## 0.10.0
+
+### Minor Changes
+
+- 84903c1: Add multiple components
+
+  - ButtonIcon
+  - TextField
+  - Select
+  - Textarea
+  - Label
+  - Loader
+  - LoaderOverly
+
 ## 0.9.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -42,13 +42,13 @@
     "react-dom": "^19.0.0",
     "storybook": "^8.6.9",
     "type-fest": "^4.37.0",
-    "typescript": "5.8.2",
+    "typescript": "^5.8.2",
     "vite": "^6.2.1",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.8",
-    "@kalink-ui/dibbly": "0.3.0",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.8.0"
+    "@kalink-ui/dibbly": "0.4.0",
+    "@kalink-ui/eslint-config": "0.9.0",
+    "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",
@@ -57,9 +57,15 @@
     "@vanilla-extract/recipes": "^0.5.5",
     "@vanilla-extract/sprinkles": "^1.6.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "typescript": "^5.8.2"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-scroll-area": "^1.2.6",
+    "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-slot": "^1.2.0",
     "clsx": "^2.1.1"
   },
   "publishConfig": {

package/src/components/box/box.css.ts

@@ -1,7 +1,7 @@
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
-import { mapContractVars, sys } from '../../styles';
-import { components } from '../../styles/layers.css';
+import { mapContractVars, sys } from '@kalink-ui/seedly/styles';
+import { components } from '@kalink-ui/seedly/styles/layers';
 
 export const boxRecipe = recipe({
   variants: {

package/src/components/button/button.css.ts

@@ -13,9 +13,6 @@ import { transition } from '../../styles/transition';
 export const buttonVars = createThemeContract({
   borderRadius: null,
   textTransform: null,
-});
-
-const vars = createThemeContract({
   color: {
     text: null,
     background: null,
@@ -42,22 +39,22 @@ export const buttonRecipe = recipe({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: vars.spacing.inner,
+        gap: buttonVars.spacing.inner,
 
-        paddingBlock: vars.spacing.block,
-        paddingInline: vars.spacing.inline,
+        paddingBlock: buttonVars.spacing.block,
+        paddingInline: buttonVars.spacing.inline,
 
-        color: vars.color.text,
+        color: buttonVars.color.text,
         textTransform: fallbackVar(buttonVars.textTransform, 'unset'),
-        backgroundColor: vars.color.background,
+        backgroundColor: buttonVars.color.background,
         borderRadius: fallbackVar(
           buttonVars.borderRadius,
           sys.shape.corner.none,
         ),
-        borderWidth: vars.border.width,
-        borderStyle: vars.border.style,
-        borderColor: vars.border.color,
-        boxShadow: vars.shadow.level,
+        borderWidth: buttonVars.border.width,
+        borderStyle: buttonVars.border.style,
+        borderColor: buttonVars.border.color,
+        boxShadow: buttonVars.shadow.level,
 
         transition: transition(
           ['background-color', 'box-shadow', 'border-color', 'color'],
@@ -81,11 +78,11 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              ...assignVars(vars.color, {
+              ...assignVars(buttonVars.color, {
                 text: sys.color.background,
                 background: sys.color.foreground,
               }),
-              ...assignVars(vars.border, {
+              ...assignVars(buttonVars.border, {
                 width: '1px',
                 style: 'solid',
                 color: 'transparent',
@@ -93,19 +90,19 @@ export const buttonRecipe = recipe({
             },
             ':hover': {
               vars: {
-                [vars.color.background]:
+                [buttonVars.color.background]:
                   `color-mix(in srgb, ${sys.color.foreground}, ${sys.color.background} calc(100% * ${sys.state.hovered.opacity}))`,
-                [vars.shadow.level]: sys.elevation.minimal,
+                [buttonVars.shadow.level]: sys.elevation.minimal,
               },
             },
             ':disabled': {
               vars: {
-                ...assignVars(vars.color, {
+                ...assignVars(buttonVars.color, {
                   text: `color-mix(in srgb, ${sys.color.background} calc(100% * ${sys.state.muted.light}), transparent)`,
                   background: `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
                 }),
-                [vars.shadow.level]: sys.elevation.none,
-                [vars.border.color]: `transparent`,
+                [buttonVars.shadow.level]: sys.elevation.none,
+                [buttonVars.border.color]: `transparent`,
               },
             },
           },
@@ -115,11 +112,11 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              ...assignVars(vars.color, {
+              ...assignVars(buttonVars.color, {
                 text: sys.color.foreground,
                 background: 'unset',
               }),
-              ...assignVars(vars.border, {
+              ...assignVars(buttonVars.border, {
                 width: '1px',
                 style: 'solid',
                 color: sys.color.foreground,
@@ -128,16 +125,16 @@ export const buttonRecipe = recipe({
             selectors: {
               '&:hover': {
                 vars: {
-                  [vars.color.background]:
+                  [buttonVars.color.background]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.hovered.opacity}), transparent)`,
                 },
               },
               '&:disabled': {
                 vars: {
-                  [vars.color.background]: 'unset',
-                  [vars.color.text]:
+                  [buttonVars.color.background]: 'unset',
+                  [buttonVars.color.text]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
-                  [vars.border.color]:
+                  [buttonVars.border.color]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
                 },
               },
@@ -149,11 +146,11 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              ...assignVars(vars.color, {
+              ...assignVars(buttonVars.color, {
                 text: sys.color.foreground,
                 background: 'unset',
               }),
-              ...assignVars(vars.border, {
+              ...assignVars(buttonVars.border, {
                 width: '1px',
                 style: 'solid',
                 color: 'transparent',
@@ -162,14 +159,14 @@ export const buttonRecipe = recipe({
             selectors: {
               '&:hover': {
                 vars: {
-                  [vars.color.background]:
+                  [buttonVars.color.background]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.hovered.opacity}), transparent)`,
                 },
               },
               '&:disabled': {
                 vars: {
-                  [vars.color.background]: 'unset',
-                  [vars.color.text]:
+                  [buttonVars.color.background]: 'unset',
+                  [buttonVars.color.text]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
                 },
               },
@@ -185,11 +182,11 @@ export const buttonRecipe = recipe({
             textDecoration: 'none',
 
             vars: {
-              ...assignVars(vars.color, {
+              ...assignVars(buttonVars.color, {
                 text: sys.color.foreground,
                 background: 'unset',
               }),
-              ...assignVars(vars.spacing, {
+              ...assignVars(buttonVars.spacing, {
                 block: '0',
                 inline: '0',
                 inner: '0',
@@ -203,7 +200,7 @@ export const buttonRecipe = recipe({
               '&:disabled': {
                 textDecoration: 'none',
                 vars: {
-                  [vars.color.text]:
+                  [buttonVars.color.text]:
                     `color-mix(in srgb, ${sys.color.foreground} calc(100% * ${sys.state.muted.dark}), transparent)`,
                 },
               },
@@ -217,7 +214,7 @@ export const buttonRecipe = recipe({
       sm: {
         '@layer': {
           [components]: {
-            vars: assignVars(vars.spacing, {
+            vars: assignVars(buttonVars.spacing, {
               block: sys.spacing[2],
               inline: sys.spacing[3],
               inner: sys.spacing[3],
@@ -228,7 +225,7 @@ export const buttonRecipe = recipe({
       md: {
         '@layer': {
           [components]: {
-            vars: assignVars(vars.spacing, {
+            vars: assignVars(buttonVars.spacing, {
               block: sys.spacing[2],
               inline: sys.spacing[4],
               inner: sys.spacing[4],
@@ -239,7 +236,7 @@ export const buttonRecipe = recipe({
       lg: {
         '@layer': {
           [components]: {
-            vars: assignVars(vars.spacing, {
+            vars: assignVars(buttonVars.spacing, {
               block: sys.spacing[3],
               inline: sys.spacing[6],
               inner: sys.spacing[6],
@@ -260,8 +257,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -276,8 +273,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -292,8 +289,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -308,8 +305,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -324,8 +321,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },
@@ -340,8 +337,8 @@ export const buttonRecipe = recipe({
         '@layer': {
           [components]: {
             vars: {
-              [vars.spacing.block]: '0',
-              [vars.spacing.inline]: '0',
+              [buttonVars.spacing.block]: '0',
+              [buttonVars.spacing.inline]: '0',
             },
           },
         },

package/src/components/button/button.tsx

@@ -11,14 +11,15 @@ import {
 } from './button.css';
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-type ButtonTypes = 'button' | 'a' | ComponentType<any>;
+export type ButtonTypes = 'button' | 'a' | ComponentType<any>;
 
-type ButtonProps<TUse extends ButtonTypes> = PolymorphicComponentProps<TUse> &
-  ButtonVariants & {
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
-    children?: string;
-  };
+export type ButtonProps<TUse extends ButtonTypes> =
+  PolymorphicComponentProps<TUse> &
+    ButtonVariants & {
+      startSlot?: ReactNode;
+      endSlot?: ReactNode;
+      children?: string;
+    };
 
 export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
   const {
@@ -39,7 +40,9 @@ export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
       {...(rest as any)}
     >
       {startSlot && <span className={clsx(buttonStartSlot)}>{startSlot}</span>}
-      <span className={clsx(buttonLabel({ size }))}>{children}</span>
+      {children && (
+        <span className={clsx(buttonLabel({ size }))}>{children}</span>
+      )}
       {endSlot && <span className={clsx(buttonEndSlot)}>{endSlot}</span>}
     </Comp>
   );

package/src/components/button/index.ts

@@ -1,2 +1,2 @@
-export { Button } from './button';
+export { Button, type ButtonProps, type ButtonTypes } from './button';
 export { buttonRecipe, type ButtonVariants } from './button.css';

package/src/components/button-icon/button-icon.css.ts

@@ -0,0 +1,90 @@
+import { assignVars, globalStyle } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+import { buttonRecipe, buttonVars } from '../button/button.css';
+
+export const buttonIcon = recipe({
+  base: [buttonRecipe.classNames.base],
+
+  variants: {
+    variant: buttonRecipe.classNames.variants.variant,
+    size: {
+      sm: {
+        '@layer': {
+          [components]: {
+            vars: assignVars(buttonVars.spacing, {
+              block: sys.spacing[2],
+              inline: sys.spacing[2],
+              inner: sys.spacing[2],
+            }),
+          },
+        },
+      },
+      md: {
+        '@layer': {
+          [components]: {
+            vars: assignVars(buttonVars.spacing, {
+              block: sys.spacing[2],
+              inline: sys.spacing[2],
+              inner: sys.spacing[2],
+            }),
+          },
+        },
+      },
+      lg: {
+        '@layer': {
+          [components]: {
+            vars: assignVars(buttonVars.spacing, {
+              block: sys.spacing[3],
+              inline: sys.spacing[3],
+              inner: sys.spacing[3],
+            }),
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'ghost',
+    size: 'md',
+  },
+});
+
+globalStyle(`${buttonIcon.classNames.variants.size.sm} > svg`, {
+  width: calc.multiply(
+    sys.typography.label.small.lineHeight,
+    sys.typography.label.small.size,
+  ),
+  height: calc.multiply(
+    sys.typography.label.small.lineHeight,
+    sys.typography.label.small.size,
+  ),
+});
+
+globalStyle(`${buttonIcon.classNames.variants.size.md} > svg`, {
+  width: calc.multiply(
+    sys.typography.label.medium.lineHeight,
+    sys.typography.label.medium.size,
+  ),
+  height: calc.multiply(
+    sys.typography.label.medium.lineHeight,
+    sys.typography.label.medium.size,
+  ),
+});
+
+globalStyle(`${buttonIcon.classNames.variants.size.lg} > svg`, {
+  width: calc.multiply(
+    sys.typography.label.large.lineHeight,
+    sys.typography.label.large.size,
+  ),
+  height: calc.multiply(
+    sys.typography.label.large.lineHeight,
+    sys.typography.label.large.size,
+  ),
+});
+
+export type ButtonIconVariants = NonNullable<RecipeVariants<typeof buttonIcon>>;

package/src/components/button-icon/button-icon.tsx

@@ -0,0 +1,23 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
+import { clsx } from 'clsx';
+
+import { ButtonTypes } from '../button/button';
+
+import { buttonIcon, ButtonIconVariants } from './button-icon.css';
+
+export type ButtonIconProps<TUse extends ButtonTypes> =
+  PolymorphicComponentProps<TUse> & ButtonIconVariants;
+
+export function ButtonIcon<TUse extends ButtonTypes>(
+  props: ButtonIconProps<TUse>,
+) {
+  const { use: Comp = 'button', className, variant, size, ...rest } = props;
+
+  return (
+    <Comp
+      className={clsx(buttonIcon({ variant, size }), buttonIcon, className)}
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      {...(rest as any)}
+    />
+  );
+}

package/src/components/button-icon/index.ts

@@ -0,0 +1 @@
+export { ButtonIcon, type ButtonIconProps } from './button-icon';

package/src/components/card/card.tsx

@@ -10,11 +10,14 @@ import { ClusterProps } from '../cluster';
 
 import { card, cardBody, cardFooter, cardHeader } from './card.css';
 
-export type CardProps<TUse extends ElementType = 'article'> = BoxProps<TUse> & {
-  verticalSpacing?: Spacing;
-};
+export type CardRootElement = 'article' | 'div';
+
+export type CardProps<TUse extends CardRootElement = 'article'> =
+  BoxProps<TUse> & {
+    verticalSpacing?: Spacing;
+  };
 
-export function Card<TUse extends ElementType = 'article'>(
+export function Card<TUse extends CardRootElement = 'article'>(
   props: CardProps<TUse>,
 ) {
   const {

package/src/components/card/index.ts

@@ -1 +1 @@
-export { Card } from './card';
+export { Card, type CardProps, type CardRootElement } from './card';

package/src/components/center/center.tsx

@@ -4,8 +4,8 @@ import { ElementType } from 'react';
 
 import { centerRecipe, CenterVariants } from './center.css';
 
-type CenterProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  CenterVariants;
+export type CenterProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & CenterVariants;
 
 /**
  * A custom element for centering a block-level element horizontally,

package/src/components/center/index.ts

@@ -1,2 +1,2 @@
-export { Center } from './center';
+export { Center, type CenterProps } from './center';
 export { centerRecipe, type CenterVariants } from './center.css';

package/src/components/cluster/cluster.css.ts

@@ -115,6 +115,23 @@ export const clusterRecipe = recipe({
         },
       },
     },
+
+    direction: {
+      row: {
+        '@layer': {
+          [components]: {
+            flexDirection: 'row',
+          },
+        },
+      },
+      rowReverse: {
+        '@layer': {
+          [components]: {
+            flexDirection: 'row-reverse',
+          },
+        },
+      },
+    },
   },
 });
 

package/src/components/divider/divider.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+import { sys } from '../../styles';
+
+export const divider = style({
+  height: 1,
+  width: '100%',
+
+  border: 'none',
+  backgroundColor: sys.color.foreground,
+});

package/src/components/divider/divider.tsx

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+
+import { divider } from './divider.css';
+
+export interface DividerProps {
+  className?: string;
+}
+
+export function Divider({ className }: DividerProps) {
+  return <hr className={clsx(divider, className)} />;
+}

package/src/components/divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './divider';

package/src/components/form-field/form-field-context.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { createRequiredContext } from '@kalink-ui/dibbly';
+
+interface FormFieldContext {
+  name: string;
+  registerMessageId: (id: string) => void;
+  unRegisterMessageId: (id: string) => void;
+  messageIds: string[];
+  errors?: string | null;
+  hideErrorMessage: boolean;
+  label: string;
+  disabled?: boolean;
+  hideLabel: boolean;
+}
+
+export const [useFormFieldContext, FormFieldContextProvider] =
+  createRequiredContext<FormFieldContext>();

package/src/components/form-field/form-field-control.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import {
+  cloneElement,
+  HTMLAttributes,
+  isValidElement,
+  ReactElement,
+} from 'react';
+
+import { useFormFieldContext } from './form-field-context';
+import { useFormFieldItemContext } from './form-field-item-context';
+
+export interface FormFieldControlProps extends HTMLAttributes<HTMLElement> {
+  children: ReactElement;
+}
+
+export function FormFieldControl({
+  children,
+  ...props
+}: FormFieldControlProps) {
+  const { messageIds, errors } = useFormFieldContext();
+  const { id } = useFormFieldItemContext();
+
+  if (!isValidElement(children)) {
+    throw new Error('FormFieldControl must have a valid child');
+  }
+
+  return cloneElement(children, {
+    id,
+    'aria-describedby': messageIds.join(' ') || undefined,
+    'aria-invalid': !!errors || undefined,
+    ...props,
+  });
+}

package/src/components/form-field/form-field-description.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { useFormFieldItemContext } from './form-field-item-context';
+import { FormFieldMessage, FormFieldMessageProps } from './form-field-message';
+
+export type FormFieldDescriptionProps = Omit<FormFieldMessageProps, 'id'>;
+
+export function FormFieldDescription(props: FormFieldDescriptionProps) {
+  const { id } = useFormFieldItemContext();
+
+  if (!props.children) {
+    return;
+  }
+
+  return <FormFieldMessage id={`${id}-description`} {...props} />;
+}