@kalink-ui/seedly 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kalink-ui/seedly
 
+## 0.24.0
+
+### Minor Changes
+
+- 9072db5: [Heading] Allow for different pretitle and subtitle spacing
+
 ## 0.23.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.23.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/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>
     )