@kalink-ui/seedly 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @kalink-ui/seedly
 
+## 0.25.0
+
+### Minor Changes
+
+- f41d4a0: [Switcher] Correctly export types
+- 810fdce: [Heading] Fix prop types definition
+
 ## 0.24.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.24.0",
+  "version": "0.25.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/heading/heading.css.ts

@@ -39,6 +39,14 @@ export const headingRoot = recipe({
           },
         },
       },
+      justify: {
+        '@layer': {
+          [components]: {
+            alignItems: 'stretch',
+            textAlign: 'justify',
+          },
+        },
+      },
     },
   },
 });

package/src/components/heading/heading.tsx

@@ -1,47 +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, 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 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,
@@ -55,18 +56,20 @@ const headingMapping: Record<
   h6: { variant: 'headline', size: 'small' },
 };
 
-export function Heading<TUse extends HeadingTypes>({
-  children,
-  use = 'h2',
-  size,
-  variant,
-  align,
-  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}
@@ -78,7 +81,7 @@ export function Heading<TUse extends HeadingTypes>({
 
       <Text
         {...(!pretitle && !subtitle && { ref })}
-        use={use}
+        use={use as HeadingProps<TUse>['use']}
         align={align}
         variant={variant ?? headingMapping[use].variant}
         size={size ?? headingMapping[use].size}

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