@kalink-ui/seedly 0.22.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @kalink-ui/seedly
 
+## 0.24.0
+
+### Minor Changes
+
+- 9072db5: [Heading] Allow for different pretitle and subtitle spacing
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.22.0",
+  "version": "0.24.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/eslint-config": "0.9.0",
-    "@kalink-ui/typescript-config": "0.4.0"
+    "@kalink-ui/typescript-config": "0.4.0",
+    "@kalink-ui/eslint-config": "0.9.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/heading/heading.css.ts

@@ -40,11 +40,27 @@ export const headingRoot = recipe({
         },
       },
     },
+  },
+});
 
+export const pretitle = recipe({
+  variants: {
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      '@layer': {
+        [components]: {
+          marginBlockEnd: sys.spacing[key],
+        },
+      },
+    })),
+  },
+});
+
+export const subtitle = recipe({
+  variants: {
     spacing: mapContractVars(sys.spacing, (key) => ({
       '@layer': {
         [components]: {
-          gap: sys.spacing[key],
+          marginBlockStart: sys.spacing[key],
         },
       },
     })),

package/src/components/heading/heading.tsx

@@ -5,7 +5,7 @@ import { Spacing, TypographySize, TypographyVariant } from '../../styles';
 import { ConditionalWrapper } from '../conditional-wrapper';
 import { Text, TextProps } from '../text';
 
-import { headingRoot } from './heading.css';
+import { headingRoot, pretitle, subtitle } from './heading.css';
 
 export type HeadingTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
@@ -32,11 +32,6 @@ export type HeadingProps<TUse extends ElementType = 'h2'> = Omit<
    */
   subtitle?: ReactElement<TextProps<'p'>>;
 
-  /**
-   * The spacing between the title and the pretitle or subtitle.
-   */
-  spacing?: Spacing;
-
   /**
    * The text to render.
    */
@@ -66,7 +61,6 @@ export function Heading<TUse extends HeadingTypes>({
   size,
   variant,
   align,
-  spacing,
   pretitle,
   subtitle,
   rootClassName,
@@ -78,7 +72,7 @@ export function Heading<TUse extends HeadingTypes>({
       ref={ref}
       use={'hgroup'}
       condition={!!pretitle || !!subtitle}
-      className={clsx(headingRoot({ align, spacing }), rootClassName)}
+      className={clsx(headingRoot({ align }), rootClassName)}
     >
       {pretitle}
 
@@ -100,17 +94,26 @@ export function Heading<TUse extends HeadingTypes>({
 
 export type HeadingPretitleProps = Omit<TextProps<'p'>, 'children'> & {
   children?: string | null;
+  spacing?: Spacing;
 };
 
 Heading.Pretitle = function HeadingPretitle({
   variant = 'title',
   size = 'medium',
+  spacing,
   children,
+  className,
   ...rest
 }: HeadingPretitleProps) {
   return (
     children && (
-      <Text use="p" variant={variant} size={size} {...rest}>
+      <Text
+        use="p"
+        variant={variant}
+        size={size}
+        className={clsx(pretitle({ spacing }), className)}
+        {...rest}
+      >
         {children}
       </Text>
     )
@@ -119,17 +122,26 @@ Heading.Pretitle = function HeadingPretitle({
 
 export type HeadingSubtitleProps = Omit<TextProps<'p'>, 'children'> & {
   children?: string | null;
+  spacing?: Spacing;
 };
 
 Heading.Subtitle = function HeadingSubtitle({
   variant = 'title',
   size = 'medium',
+  spacing,
   children,
+  className,
   ...rest
 }: HeadingSubtitleProps) {
   return (
     children && (
-      <Text use="p" variant={variant} size={size} {...rest}>
+      <Text
+        use="p"
+        variant={variant}
+        size={size}
+        className={clsx(subtitle({ spacing }), className)}
+        {...rest}
+      >
         {children}
       </Text>
     )