@kalink-ui/seedly 0.21.0 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @kalink-ui/seedly
 
+## 0.23.0
+
+### Minor Changes
+
+- e77a3af: [AlertDialog] Correctly pass spacing prop to underlying `Box` component
+- 985fd61: [Button] Reexport all style definitions
+- a150fe7: [Button] Expose inner components to enhance composability
+
+## 0.22.0
+
+### Minor Changes
+
+- 26816de: [Styles] Add `justifySelf` responsive property
+
 ## 0.21.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -44,8 +44,8 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3",
     "@kalink-ui/dibbly": "0.5.0",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.9.0"
+    "@kalink-ui/eslint-config": "0.9.0",
+    "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",

package/src/components/alert-dialog/alert-dialog-content.tsx

@@ -28,6 +28,7 @@ export function AlertDialogContent({
   maxHeight = '50vh',
   elevation = 'high',
   radius,
+  spacing = 2,
   ...props
 }: AlertDialogContentProps) {
   return (
@@ -38,7 +39,12 @@ export function AlertDialogContent({
         asChild
         {...props}
       >
-        <Box spacing={2} variant="solid" elevation={elevation} radius={radius}>
+        <Box
+          variant="solid"
+          spacing={spacing}
+          elevation={elevation}
+          radius={radius}
+        >
           <ScrollArea maxHeight={maxHeight}>{children}</ScrollArea>
         </Box>
       </Content>

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

@@ -3,7 +3,6 @@ import {
   createThemeContract,
   fallbackVar,
   globalStyle,
-  style,
 } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
@@ -359,13 +358,18 @@ export const buttonLabel = recipe({
   },
 });
 
-const buttonSlot = style({
-  flexShrink: 0,
-});
-
-export const buttonSlotStart = style([buttonSlot]);
+export const buttonSlot = recipe({
+  base: {
+    flexShrink: 0,
+  },
 
-export const buttonSlotEnd = style([buttonSlot]);
+  variants: {
+    position: {
+      start: {},
+      end: {},
+    },
+  },
+});
 
 globalStyle(`${buttonRecipe.classNames.variants.size.sm} svg`, {
   '@layer': {

package/src/components/button/button.tsx

@@ -1,12 +1,11 @@
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
-import { ComponentType, ReactNode } from 'react';
+import { ComponentType, ElementType, ReactNode } from 'react';
 
 import {
   buttonLabel,
   buttonRecipe,
-  buttonSlotEnd,
-  buttonSlotStart,
+  buttonSlot,
   ButtonVariants,
 } from './button.css';
 
@@ -22,28 +21,84 @@ export type ButtonProps<TUse extends ButtonTypes> =
     };
 
 export function Button<TUse extends ButtonTypes>(props: ButtonProps<TUse>) {
-  const {
-    use: Comp = 'button',
-    className,
-    variant,
-    children,
-    startSlot,
-    endSlot,
-    size = 'md',
-    ...rest
-  } = props;
+  const { children, startSlot, endSlot, size = 'md', ...rest } = props;
+
+  return (
+    <ButtonRoot {...rest} size={size}>
+      {startSlot && (
+        <ButtonSlot use="span" position="start">
+          {startSlot}
+        </ButtonSlot>
+      )}
+      {children && (
+        <ButtonLabel use="span" size={size}>
+          {children}
+        </ButtonLabel>
+      )}
+      {endSlot && (
+        <ButtonSlot use="span" position="end">
+          {endSlot}
+        </ButtonSlot>
+      )}
+    </ButtonRoot>
+  );
+}
+
+export type ButtonRootProps<TUse extends ButtonTypes> =
+  PolymorphicComponentProps<TUse> & ButtonVariants;
+
+export function ButtonRoot<TUse extends ButtonTypes>(
+  props: ButtonRootProps<TUse>,
+) {
+  const { use: Comp = 'button', className, variant, size, ...rest } = props;
 
   return (
     <Comp
       className={clsx(buttonRecipe({ variant, size }), className)}
       /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
       {...(rest as any)}
-    >
-      {startSlot && <span className={clsx(buttonSlotStart)}>{startSlot}</span>}
-      {children && (
-        <span className={clsx(buttonLabel({ size }))}>{children}</span>
-      )}
-      {endSlot && <span className={clsx(buttonSlotEnd)}>{endSlot}</span>}
+    />
+  );
+}
+
+export type ButtonLabelProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & {
+    children?: ReactNode;
+    size?: ButtonVariants['size'];
+  };
+
+export function ButtonLabel<TUse extends ElementType>(
+  props: ButtonLabelProps<TUse>,
+) {
+  const { use: Comp = 'span', children, className, size, ...rest } = props;
+
+  return (
+    <Comp className={clsx(buttonLabel({ size }), className)} {...rest}>
+      {children}
+    </Comp>
+  );
+}
+
+export type ButtonSlotProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & {
+    children?: ReactNode;
+    position?: 'start' | 'end';
+  };
+
+export function ButtonSlot<TUse extends ElementType>(
+  props: ButtonSlotProps<TUse>,
+) {
+  const {
+    use: Comp = 'span',
+    children,
+    position = 'start',
+    className,
+    ...rest
+  } = props;
+
+  return (
+    <Comp className={clsx(buttonSlot({ position }), className)} {...rest}>
+      {children}
     </Comp>
   );
 }

package/src/components/button/index.ts

@@ -1,2 +1,19 @@
-export { Button, type ButtonProps, type ButtonTypes } from './button';
-export { buttonRecipe, type ButtonVariants } from './button.css';
+export {
+  Button,
+  ButtonRoot,
+  ButtonLabel,
+  ButtonSlot,
+  type ButtonProps,
+  type ButtonTypes,
+  type ButtonRootProps,
+  type ButtonLabelProps,
+  type ButtonSlotProps,
+} from './button';
+
+export {
+  buttonRecipe,
+  buttonVars,
+  buttonSlot,
+  buttonLabel,
+  type ButtonVariants,
+} from './button.css';

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

@@ -15,7 +15,7 @@ export function ButtonIcon<TUse extends ButtonTypes>(
 
   return (
     <Comp
-      className={clsx(buttonIcon({ variant, size }), buttonIcon, className)}
+      className={clsx(buttonIcon({ variant, size }), className)}
       /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
       {...(rest as any)}
     />

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

@@ -69,6 +69,7 @@ export const defineResponsiveProperties = ({
         'space-around',
         'space-evenly',
       ],
+      justifySelf: ['start', 'end', 'center', 'stretch'],
       alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
       alignSelf: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
 
@@ -131,6 +132,8 @@ export type DisplayValues =
   keyof DefineResponsiveProperties['styles']['display']['values'];
 export type JustifyContentValues =
   keyof DefineResponsiveProperties['styles']['justifyContent']['values'];
+export type JustifySelfValues =
+  keyof DefineResponsiveProperties['styles']['justifySelf']['values'];
 export type AlignItemsValues =
   keyof DefineResponsiveProperties['styles']['alignItems']['values'];
 export type AlignSelfValues =
@@ -180,6 +183,8 @@ export interface ResponsiveProperties {
   flexDirection?: ResponsiveValue<FlexDirectionValues>;
   /** Mapped to `justify-content` css property */
   justifyContent?: ResponsiveValue<JustifyContentValues>;
+  /** Mapped to `justify-self` css property */
+  justifySelf?: ResponsiveValue<JustifySelfValues>;
   /** Mapped to `align-items` css property */
   alignItems?: ResponsiveValue<AlignItemsValues>;
   /** Mapped to `align-self` css property */