@kroo-web/design-system 1.41.1 → 1.42.0

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/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

@@ -23,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';