@kroo-web/design-system 1.40.1 → 1.42.0

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

@@ -8,3 +8,4 @@ export declare const FormLayout: Story;
 export declare const Responsive: Story;
 export declare const ImplicitGridWrapping: Story;
 export declare const SemanticElements: Story;
+export declare const CustomGap: Story;

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

@@ -9,7 +9,8 @@ export type TGridProps = {
     children: React.ReactNode;
     className?: string;
     cols: ColumnSize | Responsive<ColumnSize>;
+    gap?: Responsive<'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs'>;
     ref?: React.Ref<HTMLElement>;
 } & React.HTMLAttributes<HTMLElement>;
-export declare const Grid: ({ as, children, className, cols, ref, ...props }: TGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: ({ as, children, className, cols, gap, ref, ...props }: TGridProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Notice } from '.';
+
+declare const meta: Meta<typeof Notice>;
+export default meta;
+type Story = StoryObj<typeof Notice>;
+export declare const DirectDebitGuarantee: Story;
+export declare const WithLongContent: Story;
+export declare const Variants: Story;

package/dist/components/Notice/Notice.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,18 @@
+export type TNoticeProps = {
+    children: React.ReactNode;
+    className?: string;
+    ref?: React.Ref<HTMLElement>;
+    variant?: 'primary' | 'secondary';
+} & React.HTMLAttributes<HTMLElement>;
+export type TNoticeVisualProps = {
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type TNoticeContentProps = {
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const Notice: (({ children, className, ref, variant, ...props }: TNoticeProps) => import("react/jsx-runtime").JSX.Element) & {
+    Content: ({ children, className, ...props }: TNoticeContentProps) => import("react/jsx-runtime").JSX.Element;
+    Visual: ({ children, className, ...props }: TNoticeVisualProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/NumberField/numberField.stories.d.ts

@@ -12,7 +12,6 @@ export declare const Helper: {
     render: () => import("react/jsx-runtime").JSX.Element;
 };
 export declare const Native: Story;
-export declare const BothInputs: Story;
-export declare const NativeWithHookForm: {
+export declare const WithHookForm: {
     render: () => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,4 +1,10 @@
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+type Responsive<T> = {
+    base: T;
+    desktop?: T;
+    tablet?: T;
+};
+type VariantType = 'cards' | 'circle';
 export type TRadioGroupRootProps = {
     children: React.ReactNode;
     className?: string;
@@ -9,14 +15,14 @@ export type TRadioGroupRootProps = {
     label: string;
     name: string;
     onChange: (value: string) => void;
-    variant?: 'cards' | 'circle';
+    variant?: Responsive<VariantType> | VariantType;
     visual?: 'horizontal' | 'vertical';
-} & RadixRadioGroup.RadioGroupProps;
+} & Omit<RadixRadioGroup.RadioGroupProps, 'onValueChange'>;
 export declare const RadioGroup: {
     Indicator: ({ className, ...props }: RadixRadioGroup.RadioGroupIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ children, className, supportingText, variant, ...props }: {
+    Item: ({ children, className, supportingText, ...props }: {
         supportingText?: string;
-        variant?: "cards" | "circle";
     } & RadixRadioGroup.RadioGroupItemProps) => import("react/jsx-runtime").JSX.Element;
     Root: ({ children, className, disabled, error, label, onChange, variant, visual, ...props }: TRadioGroupRootProps) => import("react/jsx-runtime").JSX.Element;
 };
+export {};

package/dist/components/RadioGroup/radioGroup.stories.d.ts

@@ -8,3 +8,4 @@ export declare const GeneralUsage: Story;
 export declare const Variants: Story;
 export declare const Error: Story;
 export declare const ExtraLong: Story;
+export declare const ResponsiveVariant: Story;

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

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Stack } from '.';
+
+declare const meta: Meta<typeof Stack>;
+export default meta;
+type Story = StoryObj<typeof Stack>;
+export declare const GeneralUsage: Story;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;
+/**
+ * Demonstrates the direction flip.
+ * Mobile: Vertical | Tablet/Desktop: Horizontal
+ */
+export declare const ResponsiveDirection: Story;
+/**
+ * NEW: Demonstrates responsive fullWidth.
+ * Buttons stretch to 100% on mobile, but shrink to their content width on tablet.
+ */
+export declare const ResponsiveFullWidth: Story;
+/**
+ * NEW: Demonstrates responsive wrapping.
+ * Tags wrap to a new line on mobile, but stay on one scrolling line on tablet.
+ */
+export declare const ResponsiveWrap: Story;
+export declare const MarketingPage: Story;

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

@@ -0,0 +1,31 @@
+type Direction = 'horizontal' | 'horizontal-reverse' | 'vertical' | 'vertical-reverse';
+type JustifyContent = 'around' | 'between' | 'center' | 'end' | 'evenly' | 'start';
+type AlignItems = 'center' | 'end' | 'start' | 'stretch';
+type Responsive<T> = {
+    base: T;
+    desktop?: T;
+    tablet?: T;
+};
+type JustifyValue = JustifyContent | Responsive<JustifyContent>;
+type AlignValue = AlignItems | Responsive<AlignItems>;
+type DirectionValue = Direction | Responsive<Direction>;
+type GapValue = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs' | Responsive<'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs'>;
+type WrapValue = boolean | Responsive<boolean>;
+type FullWidthValue = boolean | Responsive<boolean>;
+export type TStackProps = {
+    alignItems?: AlignValue;
+    as?: React.ElementType;
+    children: React.ReactNode;
+    className?: string;
+    fullWidth?: FullWidthValue;
+    gap?: GapValue;
+    justifyContent?: JustifyValue;
+    ref?: React.Ref<HTMLElement>;
+    variant?: DirectionValue;
+    wrap?: WrapValue;
+} & React.HTMLAttributes<HTMLElement>;
+export declare const Stack: {
+    ({ alignItems, as, children, className, fullWidth, gap, justifyContent, ref, variant, wrap, ...props }: TStackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './Icon';
 export * from './Link';
 export * from './Loading';
 export * from './Modal';
+export * from './Notice';
 export * from './NumberField';
 export * from './PhoneField';
 export * from './PinInput';
@@ -22,6 +23,7 @@ export * from './ProgressIndicator';
 export * from './RadioGroup';
 export * from './Select';
 export * from './Skeleton';
+export * from './Stack';
 export * from './Table';
 export * from './Tabs';
 export * from './Tag';