@vygruppen/spor-react 12.7.0 → 12.7.1

package/dist/index.d.cts

@@ -355,6 +355,38 @@ declare const groupRecipe: _chakra_ui_react.RecipeDefinition<{
 
 type GroupVariantProps = RecipeVariantProps<typeof groupRecipe>;
 type ButtonGroupProps = GroupProps & PropsWithChildren<GroupVariantProps>;
+/**
+ * Used to group or attach buttons together.
+ *
+ * If you have more than one button next to eachother, you might want to add a `ButtonGroup` to group them.
+ *
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button variant="primary">Save</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ *
+ * Attach buttons together with the `attached` prop.
+ *
+ * ```tsx
+ * <ButtonGroup attached>
+ *   <Button variant="primary">Open</Button>
+ *   <IconButton variant="ghost">
+ *     <SaveIcon aria-label="Save"/>
+ *   </IconButton>
+ * </ButtonGroup>
+ * ```
+ *
+ * Use the `grow` prop to make the buttons grow to fill the available space.
+ *
+ * ```tsx
+ * <ButtonGroup grow>
+ *  <Button variant="primary">Open</Button>
+ *  <Button variant="secondary">Save</Button>
+ * </ButtonGroup>
+ */
 declare const ButtonGroup: React$1.ForwardRefExoticComponent<GroupProps & {
     disabled?: _chakra_ui_react.ConditionalValue<boolean | undefined>;
 } & {
@@ -1193,12 +1225,41 @@ type ChakraInputProps = ComponentProps<typeof Input$1>;
 
 type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "colorPalette" | "placeholder"> & {
     /** The input's label */
-    label: ReactNode;
+    label?: ReactNode;
     /** Element that shows up to the left */
     startElement?: React__default.ReactNode;
     /** Element that shows up to the right */
     endElement?: React__default.ReactNode;
 };
+/**
+ * Inputs let you enter text or other data.
+ *
+ * You need to specify the label as a prop, since it doubles as the placeholder.
+ *
+ * ```tsx
+ * <Input label="E-mail" />
+ * ```
+ *
+ * You can also add icons to the left and right of the input. Please use the 24 px icons for this.
+ *
+ * ```tsx
+ * <Input label="E-mail" startElement={<EmailOutline24Icon />} />
+ * ```
+ *
+ * Input has two variants core, and floating.
+ *
+ * ```tsx
+ * <Input label="E-mail" startElement={<EmailOutline24Icon />} variant="floating" />
+ * ```
+ *
+ * Field is added to Input, so you can add helperText, errorText, and optionalText.
+ *
+ * ```tsx
+ * <Input label="E-mail" startElement={<EmailOutline24Icon />} helperText="We will never share your email." />
+ * ```
+ *
+ * @see https://spor.vy.no/components/input
+ */
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
 declare const listBoxSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "description" | "label", {
@@ -1779,7 +1840,7 @@ declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1
 
 declare const PressableCard: React$1.ForwardRefExoticComponent<{
     variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | "accent" | undefined>;
-} & ButtonProps$1 & React$1.RefAttributes<HTMLDivElement>>;
+} & ButtonProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const RadioCard: React__default.ForwardRefExoticComponent<RadioCard$1.ItemProps & {
     variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | undefined>;
@@ -1838,6 +1899,42 @@ declare const staticCardRecipe: _chakra_ui_react.RecipeDefinition<{
     };
 }>;
 
+/**
+ * `StaticCard` is a component that renders a static card.
+ *
+ * The `StaticCard` component can be used to create a card that does not respond to user interactions.
+ * It can be rendered as any HTML element by specifying the `as` prop.
+ *
+ * The `colorPalette` prop can be used to control the color palette of the card. It defaults to "white".
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <StaticCard>
+ *   Content
+ * </StaticCard>
+ * ```
+ *
+ * To render the card as a different HTML element, specify the `as` prop:
+ *
+ * ```tsx
+ * <StaticCard as="section">
+ *   This is now a <section /> element
+ * </StaticCard>
+ * ```
+ *
+ * To change the color palette of the card, specify the `colorPalette` prop:
+ *
+ * ```tsx
+ * <StaticCard colorPalette="orange">
+ *   An orange card
+ * </StaticCard>
+ * ```
+ *
+ * For a card with click functionality, use the `PressableCard` component.
+ *
+ * @see PressableCard
+ */
 type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> & BoxProps;
 declare const StaticCard: React$1.ForwardRefExoticComponent<{
     colorPalette?: _chakra_ui_react.ConditionalValue<"white" | "blue" | "green" | "grey" | "orange" | "red" | "yellow" | "darkYellow" | undefined>;

package/dist/index.d.ts

@@ -355,6 +355,38 @@ declare const groupRecipe: _chakra_ui_react.RecipeDefinition<{
 
 type GroupVariantProps = RecipeVariantProps<typeof groupRecipe>;
 type ButtonGroupProps = GroupProps & PropsWithChildren<GroupVariantProps>;
+/**
+ * Used to group or attach buttons together.
+ *
+ * If you have more than one button next to eachother, you might want to add a `ButtonGroup` to group them.
+ *
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button variant="primary">Save</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ *
+ * Attach buttons together with the `attached` prop.
+ *
+ * ```tsx
+ * <ButtonGroup attached>
+ *   <Button variant="primary">Open</Button>
+ *   <IconButton variant="ghost">
+ *     <SaveIcon aria-label="Save"/>
+ *   </IconButton>
+ * </ButtonGroup>
+ * ```
+ *
+ * Use the `grow` prop to make the buttons grow to fill the available space.
+ *
+ * ```tsx
+ * <ButtonGroup grow>
+ *  <Button variant="primary">Open</Button>
+ *  <Button variant="secondary">Save</Button>
+ * </ButtonGroup>
+ */
 declare const ButtonGroup: React$1.ForwardRefExoticComponent<GroupProps & {
     disabled?: _chakra_ui_react.ConditionalValue<boolean | undefined>;
 } & {
@@ -1193,12 +1225,41 @@ type ChakraInputProps = ComponentProps<typeof Input$1>;
 
 type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "colorPalette" | "placeholder"> & {
     /** The input's label */
-    label: ReactNode;
+    label?: ReactNode;
     /** Element that shows up to the left */
     startElement?: React__default.ReactNode;
     /** Element that shows up to the right */
     endElement?: React__default.ReactNode;
 };
+/**
+ * Inputs let you enter text or other data.
+ *
+ * You need to specify the label as a prop, since it doubles as the placeholder.
+ *
+ * ```tsx
+ * <Input label="E-mail" />
+ * ```
+ *
+ * You can also add icons to the left and right of the input. Please use the 24 px icons for this.
+ *
+ * ```tsx
+ * <Input label="E-mail" startElement={<EmailOutline24Icon />} />
+ * ```
+ *
+ * Input has two variants core, and floating.
+ *
+ * ```tsx
+ * <Input label="E-mail" startElement={<EmailOutline24Icon />} variant="floating" />
+ * ```
+ *
+ * Field is added to Input, so you can add helperText, errorText, and optionalText.
+ *
+ * ```tsx
+ * <Input label="E-mail" startElement={<EmailOutline24Icon />} helperText="We will never share your email." />
+ * ```
+ *
+ * @see https://spor.vy.no/components/input
+ */
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
 declare const listBoxSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "item" | "description" | "label", {
@@ -1779,7 +1840,7 @@ declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps$1
 
 declare const PressableCard: React$1.ForwardRefExoticComponent<{
     variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | "accent" | undefined>;
-} & ButtonProps$1 & React$1.RefAttributes<HTMLDivElement>>;
+} & ButtonProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const RadioCard: React__default.ForwardRefExoticComponent<RadioCard$1.ItemProps & {
     variant?: _chakra_ui_react.ConditionalValue<"core" | "floating" | undefined>;
@@ -1838,6 +1899,42 @@ declare const staticCardRecipe: _chakra_ui_react.RecipeDefinition<{
     };
 }>;
 
+/**
+ * `StaticCard` is a component that renders a static card.
+ *
+ * The `StaticCard` component can be used to create a card that does not respond to user interactions.
+ * It can be rendered as any HTML element by specifying the `as` prop.
+ *
+ * The `colorPalette` prop can be used to control the color palette of the card. It defaults to "white".
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * <StaticCard>
+ *   Content
+ * </StaticCard>
+ * ```
+ *
+ * To render the card as a different HTML element, specify the `as` prop:
+ *
+ * ```tsx
+ * <StaticCard as="section">
+ *   This is now a <section /> element
+ * </StaticCard>
+ * ```
+ *
+ * To change the color palette of the card, specify the `colorPalette` prop:
+ *
+ * ```tsx
+ * <StaticCard colorPalette="orange">
+ *   An orange card
+ * </StaticCard>
+ * ```
+ *
+ * For a card with click functionality, use the `PressableCard` component.
+ *
+ * @see PressableCard
+ */
 type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> & BoxProps;
 declare const StaticCard: React$1.ForwardRefExoticComponent<{
     colorPalette?: _chakra_ui_react.ConditionalValue<"white" | "blue" | "green" | "grey" | "orange" | "red" | "yellow" | "darkYellow" | undefined>;