@kroo-web/design-system 1.20.1 → 1.21.1

package/dist/components/Button/index.d.ts

@@ -18,9 +18,9 @@ type TButtonVisualTypes = {
 type TButtonOwnProps = {
     as?: 'button' | 'span';
     className?: string;
+    fullWidth?: [boolean, boolean?, boolean?] | boolean;
     onlyIcon?: boolean;
-    fullWidth?: boolean | [boolean, boolean?, boolean?];
 } & PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement> & TButtonVisualTypes;
 export type TButtonProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<TButtonOwnProps, T>;
-export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, className, onlyIcon, variant, visualType, fullWidth, ...rest }: TButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, className, fullWidth, onlyIcon, variant, visualType, ...rest }: TButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Heading/Heading.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Heading } from './index';
+
+declare const meta: Meta<typeof Heading>;
+export default meta;
+type Story = StoryObj<typeof Heading>;
+export declare const Default: Story;
+export declare const AllLevels: Story;
+export declare const AllSizes: Story;
+export declare const AllWeights: Story;
+export declare const AllFonts: Story;
+export declare const CustomSize: Story;
+export declare const SemanticVsVisual: Story;

package/dist/components/Heading/index.d.ts

@@ -0,0 +1,19 @@
+import { default as React, HTMLAttributes } from 'react';
+
+type HeadingSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl';
+type HeadingWeight = 'bold' | 'medium' | 'regular';
+interface BaseHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    size?: HeadingSize;
+    weight?: HeadingWeight;
+}
+interface HeadingDisplayProps extends BaseHeadingProps {
+    font?: 'brygada' | 'inter';
+    level: 1 | 2;
+}
+interface HeadingStandardProps extends BaseHeadingProps {
+    font?: 'inter';
+    level: 3 | 4 | 5 | 6;
+}
+type HeadingProps = HeadingDisplayProps | HeadingStandardProps;
+export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+export {};

package/dist/components/Popover/index.d.ts

@@ -1,8 +1,8 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 export type TPopoverRootProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Root>;
-export type TPopoverTriggerProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Trigger> & {
-    variant?: 'light' | 'dark';
-};
+export type TPopoverTriggerProps = {
+    variant?: 'dark' | 'light';
+} & React.ComponentPropsWithoutRef<typeof RadixPopover.Trigger>;
 export type TPopoverContentProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Content>;
 export declare const Popover: {
     Content: ({ children, ...rest }: TPopoverContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/RadioGroup/index.d.ts

@@ -10,13 +10,13 @@ export type TNativeRadioGroupRootProps = {
     children: React.ReactNode;
     className?: string;
     disabled?: boolean;
-    label: string;
-    name: string;
-    variant?: 'cards' | 'circle';
     error?: {
         message?: string;
     };
+    label: string;
+    name: string;
     onChange: (value: string) => void;
+    variant?: 'cards' | 'circle';
 } & RadixRadioGroup.RadioGroupProps;
 /**
  *
@@ -31,9 +31,9 @@ export declare const RadioGroup: {
     Root: <T extends FieldValues>({ children, className, disabled, label, name, variant, ...props }: TRadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const NativeRadioGroup: {
-    Root: ({ children, className, disabled, label, name, variant, error, onChange, ...props }: TNativeRadioGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ className, ...props }: RadixRadioGroup.RadioGroupIndicatorProps) => import("react/jsx-runtime").JSX.Element;
     Item: ({ children, className, variant, ...props }: {
         variant?: "cards" | "circle";
     } & RadixRadioGroup.RadioGroupItemProps) => import("react/jsx-runtime").JSX.Element;
-    Indicator: ({ className, ...props }: RadixRadioGroup.RadioGroupIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, disabled, error, label, name, onChange, variant, ...props }: TNativeRadioGroupRootProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/Text/Text.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Text } from '.';
+
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const Playground: Story;
+export declare const KitchenSink: Story;

package/dist/components/Text/index.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+
+export type BodyVariant = 'body-lg' | 'body-md' | 'body-sm' | 'body-xl' | 'body-xs';
+export type FunctionalVariant = 'button-md' | 'button-sm' | 'helper' | 'input-regular' | 'input-semi-bold' | 'label' | 'overline' | 'tag';
+export type TextVariant = BodyVariant | FunctionalVariant;
+export type TextWeight = 'bold' | 'medium' | 'regular';
+type BaseTextProps<C extends React.ElementType> = {
+    as?: C;
+    children?: React.ReactNode;
+    className?: string;
+} & React.ComponentPropsWithoutRef<C>;
+type BodyProps<C extends React.ElementType> = {
+    variant?: BodyVariant;
+    weight?: TextWeight;
+} & BaseTextProps<C>;
+type FunctionalProps<C extends React.ElementType> = {
+    variant: FunctionalVariant;
+    weight?: never;
+} & BaseTextProps<C>;
+type TextProps<C extends React.ElementType> = BodyProps<C> | FunctionalProps<C>;
+export declare const Text: <C extends React.ElementType = "p">(props: TextProps<C>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Typography/index.d.ts

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
+
 export type TLegacyMarketingText = 'marketing-large-light' | 'marketing-large-regular' | 'marketing-large-semi-bold' | 'marketing-medium-light' | 'marketing-medium-regular' | 'marketing-medium-semi-bold' | 'marketing-quote-light' | 'marketing-quote-regular' | 'marketing-quote-semi-bold' | 'marketing-small-light' | 'marketing-small-regular' | 'marketing-small-semi-bold' | 'marketing-tag-light' | 'marketing-tag-regular' | 'marketing-tag-semi-bold' | 'marketing-text-light' | 'marketing-text-regular' | 'marketing-text-semi-bold';
 export type TLegacyMarketingHeading = 'marketing-heading-1' | 'marketing-heading-2' | 'marketing-heading-3' | 'marketing-heading-4' | 'marketing-heading-5' | 'marketing-heading-6' | 'marketing-heading-7';
 export type TLegacyMarketingFooter = 'footer-regular' | 'footer-semi-bold';
@@ -9,4 +11,10 @@ export type TTypographyProps<C extends React.ElementType = 'p'> = {
     className?: string;
     variant?: TTypographyVariants;
 } & React.ComponentPropsWithoutRef<C>;
+/**
+ * @deprecated This component is being retired in favor of strictly typed primitives.
+ *
+ * - For Headings (H1-H6), please use `<Heading />`.
+ * - For body text, labels, or spans, please use `<Text />`.
+ */
 export declare const Typography: <C extends React.ElementType = "p">({ as, children, className, variant, ...rest }: TTypographyProps<C>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -9,6 +9,8 @@ export * from './ComboBox';
 export * from './DatePicker';
 export * from './Disclosure';
 export * from './Form';
+export * from './Heading';
+export * from './HorizontalRule';
 export * from './Icon';
 export * from './Link';
 export * from './Loading';
@@ -25,10 +27,10 @@ export * from './Skeleton';
 export * from './Table';
 export * from './Tabs';
 export * from './Tag';
+export * from './Text';
 export * from './TextField';
 export * from './Toast';
 export * from './Toggle';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Wrapper';
-export * from './HorizontalRule';