@companycam/slab-web 2.1.3 → 2.2.1

package/lib/InputCheckbox/InputCheckbox.d.ts

@@ -2,14 +2,17 @@ import { ComponentPropsWithRef, ReactNode } from 'react';
 import { UseMessageProps } from '../shared/types';
 type HTMLInputProps = ComponentPropsWithRef<'input'>;
 type FilteredHTMLInputProps = Omit<HTMLInputProps, 'type'>;
+export type InputCheckboxScale = 'medium' | 'large';
 type BaseInputCheckboxProps = FilteredHTMLInputProps & UseMessageProps & {
-    label: ReactNode;
-    value: string;
+    'data-testid'?: string;
+    description?: string;
+    design?: 'default' | 'assetFeed' | 'task';
     hideLabel?: boolean;
-    design?: 'default' | 'assetFeed';
+    label: ReactNode;
+    scale?: InputCheckboxScale;
     /** @deprecated - use `data-testid` */
     testId?: string;
-    'data-testid'?: string;
+    value: string;
 };
 type IndeterminateProps = {
     indeterminate?: false;
@@ -26,18 +29,22 @@ export type InputCheckboxProps = BaseInputCheckboxProps & IndeterminateProps;
 - `id` is required to associate the checkbox with the optional `message`.
 - In general, use sentence case for the required `label` (e.g., "I agree to the terms"; not "I Agree to the Terms").
 - **Indeterminate**: When using `indeterminate={true}`, you must also control the `checked` state. **Recommendation**: Set `checked={false}` when `indeterminate={true}` for consistent behavior (clicking an indeterminate checkbox typically checks it).
+- **aria-disabled**: When set, the checkbox appears visually disabled (dashed border) but remains interactive. Use this when the checkbox should signal "not yet actionable" while still allowing user interaction — for example, to surface a validation message.
+- **`design="assetFeed"` is deprecated.** Use `scale="large"` instead — `large` matches the assetFeed dimensions.
 */
 export declare const InputCheckbox: import('react').ForwardRefExoticComponent<(Omit<FilteredHTMLInputProps & import('../shared/types').GetStatusProps & {
     id: string;
     message?: ReactNode;
 } & {
-    label: ReactNode;
-    value: string;
+    'data-testid'?: string;
+    description?: string;
+    design?: "default" | "assetFeed" | "task";
     hideLabel?: boolean;
-    design?: "default" | "assetFeed";
+    label: ReactNode;
+    scale?: InputCheckboxScale;
     /** @deprecated - use `data-testid` */
     testId?: string;
-    'data-testid'?: string;
+    value: string;
 } & {
     indeterminate?: false;
     checked?: boolean;
@@ -45,13 +52,15 @@ export declare const InputCheckbox: import('react').ForwardRefExoticComponent<(O
     id: string;
     message?: ReactNode;
 } & {
-    label: ReactNode;
-    value: string;
+    'data-testid'?: string;
+    description?: string;
+    design?: "default" | "assetFeed" | "task";
     hideLabel?: boolean;
-    design?: "default" | "assetFeed";
+    label: ReactNode;
+    scale?: InputCheckboxScale;
     /** @deprecated - use `data-testid` */
     testId?: string;
-    'data-testid'?: string;
+    value: string;
 } & {
     indeterminate: true;
     checked: boolean;

package/lib/InputCheckboxGroup/InputCheckboxGroup.d.ts

@@ -1,11 +1,13 @@
 import { ChangeEvent } from 'react';
 import { InputGroupProps } from '../shared/InputGroup/InputGroup';
-import { InputCheckboxProps } from '../InputCheckbox/InputCheckbox';
+import { InputCheckboxProps, InputCheckboxScale } from '../InputCheckbox/InputCheckbox';
 type FilteredInputCheckboxProps = Readonly<Omit<InputCheckboxProps, 'id' | 'name' | 'onChange'>>;
 export type InputCheckboxGroupProps = InputGroupProps & {
     options: readonly FilteredInputCheckboxProps[];
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
     selectedValues: readonly string[];
+    /** Controls the scale of all checkboxes in the group. Overridden per-item by a `scale` on the option itself. */
+    scale?: InputCheckboxScale;
 };
 /**
  * - InputCheckboxGroup is a controlled component: You must provide an `onChange` handler to update `selectedValues`.
@@ -53,5 +55,5 @@ export type InputCheckboxGroupProps = InputGroupProps & {
  * );
  * ```
  */
-export declare function InputCheckboxGroup({ onChange, options, selectedValues, ...props }: InputCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputCheckboxGroup({ onChange, options, selectedValues, scale, ...props }: InputCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
 export default InputCheckboxGroup;

package/lib/InputRadio/InputRadio.d.ts

@@ -2,11 +2,13 @@ import { ComponentPropsWithRef, ReactNode } from 'react';
 import { GetStatusProps } from '../shared/types.js';
 type HTMLInputProps = ComponentPropsWithRef<'input'>;
 type FilteredHTMLInputProps = Omit<HTMLInputProps, 'type'>;
+export type InputRadioScale = 'medium' | 'large';
 export type InputRadioProps = FilteredHTMLInputProps & GetStatusProps & {
     id: string;
     label: ReactNode;
     value: string;
     name: string;
+    scale?: InputRadioScale;
     /** @deprecated use `data-testid` instead */
     testId?: string;
     'data-testid'?: string;

package/lib/InputRadioGroup/InputRadioGroup.d.ts

@@ -1,11 +1,13 @@
 import { ChangeEvent } from 'react';
 import { InputGroupProps } from '../shared/InputGroup/InputGroup';
-import { InputRadioProps } from '../InputRadio/InputRadio';
+import { InputRadioProps, InputRadioScale } from '../InputRadio/InputRadio';
 type FilteredInputRadioProps = Readonly<Omit<InputRadioProps, 'id' | 'name' | 'onChange'>>;
 export type InputRadioGroupProps = InputGroupProps & {
     options: readonly FilteredInputRadioProps[];
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
     selectedValue: string;
+    /** Controls the scale of all radio inputs in the group. Overridden per-item by a `scale` on the option itself. */
+    scale?: InputRadioScale;
 };
 /**
  * - InputRadioGroup is a controlled component: You must provide an `onChange` handler to update the `selectedValue`.
@@ -48,5 +50,5 @@ export type InputRadioGroupProps = InputGroupProps & {
  * );
  * ```
  */
-export declare function InputRadioGroup({ onChange, options, selectedValue, ...props }: InputRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputRadioGroup({ onChange, options, selectedValue, scale, ...props }: InputRadioGroupProps): import("react/jsx-runtime").JSX.Element;
 export default InputRadioGroup;

package/lib/Spinner/Spinner.d.ts

@@ -23,7 +23,7 @@ type LayoutProps = {
     $layout?: Layout;
     $ccMargin?: SpinnerProps['ccMargin'];
 };
-declare const Layout: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LayoutProps>> & string;
+declare const Layout: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof LayoutProps> & LayoutProps, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof LayoutProps> & LayoutProps, never>>> & string;
 /** Use Spinner when something's happening and the user needs to wait. Versatile and customizable.  */
 export declare const Spinner: ({ accessibilityLabel, ccMargin, "data-testid": dataTestId, isCentered, label, layout, meterColor, size, trackColor, testId, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/lib/shared/Message/Message.d.ts

@@ -9,9 +9,9 @@ export type MessageProps = HTMLDivProps & GetStatusProps & {
 type MessageContentProps = {
     $status: MessageProps['status'];
 };
-export declare const MessageContent: import('styled-components/dist/types.js').IStyledComponentBase<"web", import('styled-components/dist/types.js').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MessageContentProps>> & string;
-export declare const MessageIcon: import('styled-components/dist/types.js').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const MessageText: import('styled-components/dist/types.js').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const MessageContent: import('styled-components/dist/types.js').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$status"> & MessageContentProps, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$status"> & MessageContentProps, never>>> & string;
+export declare const MessageIcon: import('styled-components/dist/types.js').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
+export declare const MessageText: import('styled-components/dist/types.js').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 /**
  * Message is used inside forms components like InputText as a DRY way of rendering a message below the input / label UI.
  * */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companycam/slab-web",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",

package/storybook/TokenDocs/FilterableTokensList.d.ts

@@ -0,0 +1 @@
+export declare const FilterableTokensList: () => import("react/jsx-runtime").JSX.Element;

package/storybook/TokenDocs/TokenItem.d.ts

@@ -0,0 +1,6 @@
+import { TokenDoc } from './types';
+type TokenItemProps = {
+    token: TokenDoc;
+};
+export declare const TokenItem: ({ token }: TokenItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/storybook/TokenDocs/TokenItemLeft.d.ts

@@ -0,0 +1,7 @@
+import { TokenDoc, WebTokenDocCategory } from './types';
+type TokenItemLeftProps = {
+    token: TokenDoc;
+    category: WebTokenDocCategory;
+};
+export declare const TokenItemLeft: ({ token, category }: TokenItemLeftProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/storybook/TokenDocs/TokenSearchForm.d.ts

@@ -0,0 +1,10 @@
+import { WebTokenDocCategory } from './types';
+export type TokenSearchFormValues = {
+    query: string;
+    category: WebTokenDocCategory | '';
+};
+type TokenSearchFormProps = {
+    onChange: (values: TokenSearchFormValues) => void;
+};
+export declare const TokenSearchForm: ({ onChange }: TokenSearchFormProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/storybook/TokenDocs/TokenUsage.d.ts

@@ -0,0 +1,7 @@
+import { TokenDoc, WebTokenDocCategory } from './types';
+type TokenUsageProps = {
+    token: TokenDoc;
+    category: WebTokenDocCategory;
+};
+export declare const TokenUsage: ({ token, category }: TokenUsageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/storybook/TokenDocs/TokensList.d.ts

@@ -0,0 +1,6 @@
+import { TokenDoc } from './types';
+type TokensListProps = {
+    tokens: TokenDoc[];
+};
+export declare const TokensList: ({ tokens }: TokensListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/storybook/TokenDocs/types.d.ts

@@ -0,0 +1,3 @@
+import { tokenDocs } from '../../../../slab-tokens/src/index.ts';
+export type TokenDoc = (typeof tokenDocs)[number];
+export type WebTokenDocCategory = 'color' | 'sizeSpacing' | 'sizeBorderRadius' | 'sizeBorderWidth' | 'sizeText' | 'sizeAvatar' | 'sizeDepth';

package/storybook/TokenDocs/utils.d.ts

@@ -0,0 +1,6 @@
+import { TokenDoc, WebTokenDocCategory } from './types';
+export declare const getTokenWebCategory: (token: TokenDoc) => WebTokenDocCategory | null;
+export declare const getFilteredTokenDocs: ({ query, category, }: {
+    query?: string;
+    category?: WebTokenDocCategory;
+}) => TokenDoc[];