@kalink-ui/seedly 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @kalink-ui/seedly
 
+## 0.25.0
+
+### Minor Changes
+
+- f41d4a0: [Switcher] Correctly export types
+- 810fdce: [Heading] Fix prop types definition
+
+## 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.25.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",

package/src/components/heading/heading.css.ts

@@ -39,12 +39,36 @@ export const headingRoot = recipe({
           },
         },
       },
+      justify: {
+        '@layer': {
+          [components]: {
+            alignItems: 'stretch',
+            textAlign: 'justify',
+          },
+        },
+      },
     },
+  },
+});
+
+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

@@ -1,52 +1,48 @@
+import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { clsx } from 'clsx';
 import { ElementType, ReactElement, ReactNode } from 'react';
 
 import { Spacing, TypographySize, TypographyVariant } from '../../styles';
 import { ConditionalWrapper } from '../conditional-wrapper';
-import { Text, TextProps } from '../text';
+import { Text, TextProps, TextVariants } from '../text';
 
-import { headingRoot } from './heading.css';
+import { headingRoot, pretitle, subtitle } from './heading.css';
 
 export type HeadingTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-export type HeadingProps<TUse extends ElementType = 'h2'> = Omit<
-  TextProps<TUse>,
-  'variant' | 'children' | 'align'
-> & {
-  align?: Extract<
-    Pick<TextProps<TUse>, 'align'>['align'],
-    'start' | 'center' | 'end'
-  >;
-  /**
-   * The typography used to render the text.
-   */
-  variant: Extract<TypographyVariant, 'display' | 'headline' | 'title'>;
-
-  /**
-   * If provided, the text will be rendered before the title.
-   */
-  pretitle?: ReactElement<TextProps<'p'>>;
-
-  /**
-   * If provided, the text will be rendered after the title.
-   */
-  subtitle?: ReactElement<TextProps<'p'>>;
-
-  /**
-   * The spacing between the title and the pretitle or subtitle.
-   */
-  spacing?: Spacing;
-
-  /**
-   * The text to render.
-   */
-  children: ReactNode;
-
-  /**
-   * The class to pass to the root element.
-   */
-  rootClassName?: string;
-};
+export type HeadingProps<TUse extends ElementType = 'h2'> =
+  PolymorphicComponentProps<TUse> &
+    TextVariants & {
+      /**
+       * The typography used to render the text.
+       */
+      variant: Extract<TypographyVariant, 'display' | 'headline' | 'title'>;
+
+      /**
+       * The size of the typography used to render the text.
+       */
+      size?: TypographySize;
+
+      /**
+       * If provided, the text will be rendered before the title.
+       */
+      pretitle?: ReactElement<TextProps<'p'>>;
+
+      /**
+       * If provided, the text will be rendered after the title.
+       */
+      subtitle?: ReactElement<TextProps<'p'>>;
+
+      /**
+       * The text to render.
+       */
+      children: ReactNode;
+
+      /**
+       * The class to pass to the root element.
+       */
+      rootClassName?: string;
+    };
 
 const headingMapping: Record<
   HeadingTypes,
@@ -60,31 +56,32 @@ const headingMapping: Record<
   h6: { variant: 'headline', size: 'small' },
 };
 
-export function Heading<TUse extends HeadingTypes>({
-  children,
-  use = 'h2',
-  size,
-  variant,
-  align,
-  spacing,
-  pretitle,
-  subtitle,
-  rootClassName,
-  ref,
-  ...rest
-}: HeadingProps<TUse>) {
+export function Heading<TUse extends HeadingTypes>(props: HeadingProps<TUse>) {
+  const {
+    children,
+    use = 'h2',
+    size,
+    variant,
+    align,
+    pretitle,
+    subtitle,
+    rootClassName,
+    ref,
+    ...rest
+  } = props;
+
   return (
     <ConditionalWrapper
       ref={ref}
       use={'hgroup'}
       condition={!!pretitle || !!subtitle}
-      className={clsx(headingRoot({ align, spacing }), rootClassName)}
+      className={clsx(headingRoot({ align }), rootClassName)}
     >
       {pretitle}
 
       <Text
         {...(!pretitle && !subtitle && { ref })}
-        use={use}
+        use={use as HeadingProps<TUse>['use']}
         align={align}
         variant={variant ?? headingMapping[use].variant}
         size={size ?? headingMapping[use].size}
@@ -100,17 +97,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 +125,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>
     )

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

@@ -13,7 +13,18 @@ type SheetTitleProps<TUse extends HeadingTypes> = ComponentPropsWithRef<
 export function SheetTitle<TUse extends HeadingTypes>(
   props: SheetTitleProps<TUse>,
 ) {
-  const { use = 'h2', className, children, variant, size, ...rest } = props;
+  const {
+    use = 'h2',
+    className,
+    children,
+    variant,
+    size,
+    align,
+    subtitle,
+    pretitle,
+    rootClassName,
+    ...rest
+  } = props;
 
   return (
     <Title asChild {...rest}>
@@ -22,6 +33,10 @@ export function SheetTitle<TUse extends HeadingTypes>(
         variant={variant}
         size={size}
         className={className}
+        align={align}
+        pretitle={pretitle}
+        subtitle={subtitle}
+        rootClassName={rootClassName}
       >
         {children}
       </Heading>

package/src/components/switcher/index.ts

@@ -1,2 +1,2 @@
-export { Switcher } from './switcher';
+export { Switcher, type SwitcherProps } from './switcher';
 export { switcherRecipe, type SwitcherVariants } from './switcher.css';

package/src/components/switcher/switcher.tsx

@@ -7,13 +7,14 @@ import { ElementType } from 'react';
 
 import { switcherRecipe, SwitcherVariants, thresholdVar } from './switcher.css';
 
-type SwitcherProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  SwitcherVariants & {
-    /**
-     * The threshold at which to switch between horizontal and vertical layouts
-     */
-    threshold?: string;
-  };
+export type SwitcherProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> &
+    SwitcherVariants & {
+      /**
+       * The threshold at which to switch between horizontal and vertical layouts
+       */
+      threshold?: string;
+    };
 
 /**
  * Switch directly between horizontal and vertical layouts