@kroo-web/design-system 1.37.0 → 1.41.1

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

@@ -3,7 +3,7 @@ export type TAccordionRootProps = {
     children: React.ReactNode;
     grouping?: 'attached' | 'detached';
 } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
-export type TAccordionTriggerProps<C extends React.ElementType = 'p'> = {
+export type TAccordionTriggerProps<C extends React.ElementType = 'header' | 'p'> = {
     as?: C;
     controls?: React.ReactNode;
     size?: 'large' | 'regular';
@@ -13,7 +13,7 @@ export declare const Accordion: {
     Item: (props: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>) => import("react/jsx-runtime").JSX.Element;
     Root: (props: TAccordionRootProps) => import("react/jsx-runtime").JSX.Element;
     Trigger: import('react').ForwardRefExoticComponent<{
-        as?: "p" | undefined;
+        as?: "header" | "p" | undefined;
         controls?: React.ReactNode;
         size?: "large" | "regular";
     } & Omit<AccordionPrimitive.AccordionTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -9,4 +9,5 @@ export declare const Helper: Story;
 export declare const Error: Story;
 export declare const WithMinAndMax: Story;
 export declare const Disabled: Story;
+export declare const Missing: Story;
 export declare const WithDatePicker: Story;

package/dist/components/{Columns/Columns.stories.d.ts → Grid/Grid.stories.d.ts}

@@ -1,10 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Columns } from '.';
+import { Grid } from '.';
 
-declare const meta: Meta<typeof Columns>;
+declare const meta: Meta<typeof Grid>;
 export default meta;
-type Story = StoryObj<typeof Columns>;
+type Story = StoryObj<typeof Grid>;
 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/{Columns → Grid}/index.d.ts

@@ -4,12 +4,13 @@ type Responsive<T> = {
     tablet?: T;
 };
 type ColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-export type TColumnsProps = {
+export type TGridProps = {
     as?: React.ElementType;
     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 Columns: ({ as, children, className, cols, ref, ...props }: TColumnsProps) => 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/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/index.d.ts

@@ -4,16 +4,17 @@ export * from './Callout';
 export * from './Card';
 export * from './Cards';
 export * from './Checkbox';
-export * from './Columns';
 export * from './ComboBox';
 export * from './DatePicker';
 export * from './Disclosure';
 export * from './Divider';
+export * from './Grid';
 export * from './Heading';
 export * from './Icon';
 export * from './Link';
 export * from './Loading';
 export * from './Modal';
+export * from './Notice';
 export * from './NumberField';
 export * from './PhoneField';
 export * from './PinInput';