@redis-ui/components 43.0.2 → 43.2.1

package/skills/redis-ui-components/references/Label.md

@@ -0,0 +1,238 @@
+# Label
+
+Composable form label with required/optional markers, readonly handling, and an info icon backed by a tooltip. It also exposes a compound composition API for custom label layouts.
+
+## Import
+
+```tsx
+import { Label } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| label | `ReactNode` | - | Label content rendered by the default layout |
+| infoIconProps | `InfoIconProps` | - | Info icon and tooltip configuration |
+| required | `boolean` | `false` | Shows the required marker |
+| optional | `boolean` | `false` | Shows the optional marker |
+| readOnly | `boolean` | - | Renders the label text in readonly mode |
+| native label props | `LabelHTMLAttributes<HTMLLabelElement>` | - | Standard label attributes forwarded to the root label element |
+
+The component also accepts native `LabelHTMLAttributes<HTMLLabelElement>` props.
+
+## Sub-components
+
+- `Label.Compose` - Shared label wrapper that resolves `htmlFor` through the shared id helper and can be hidden with `show={false}`.
+- `Label.Text` - Main text content for the label.
+- `Label.Required` - Required marker rendered next to the label text.
+- `Label.Optional` - Optional marker rendered next to the label text.
+- `Label.InfoIcon` - Tooltip-backed info icon rendered at the end of the label.
+
+### `Label.Compose` Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| show | `boolean` | `true` | Controls whether the label wrapper renders |
+| native label props | `LabelHTMLAttributes<HTMLLabelElement>` | - | Standard label attributes forwarded to the wrapper |
+
+### `Label.Text` Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | - | Label text or custom content |
+| readOnly | `boolean` | - | Overrides readonly styling from context |
+| typography body props | `TypographyBodyProps` | - | Remaining body typography props forwarded to the text span |
+
+### `Label.Required` Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | `*` | Required marker content |
+| show | `boolean` | `true` | Controls whether the required marker renders |
+| typography body props | `TypographyBodyProps` | - | Remaining body typography props forwarded to the marker; `size` falls back to `S` |
+
+### `Label.Optional` Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | `(Optional)` | Optional marker content |
+| show | `boolean` | `true` | Controls whether the optional marker renders |
+| typography body props | `TypographyBodyProps` | - | Remaining body typography props forwarded to the marker; `size` falls back to `S` |
+
+### `Label.InfoIcon` Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| content | `ReactNode` | `text` | Tooltip content shown by the info icon |
+| text | `string` | - | Deprecated alias for `content` |
+| size | `IconSizeType` | - | Icon size |
+| tooltip content props | `TooltipContentProps` without `backgroundColor` and `children` | - | Remaining tooltip configuration forwarded to the info icon |
+
+## Examples
+
+### Playground
+
+```tsx
+import { Label } from '@redislabsdev/redis-ui-components';
+
+<Label label="Label" optional={false} required={false} readOnly={false} infoIconProps={{ content: 'Info Tooltip' }} />
+```
+
+### PartsAndProps
+
+> `Label` can have text, required and optional markers, and an info icon. If no parts are provided, the label is not rendered.
+
+```tsx
+import { Label } from '@redislabsdev/redis-ui-components';
+import { ShardIcon } from '@redislabsdev/redis-ui-icons';
+import { StoryHList } from '../../helpers/Story.style';
+import * as S from './Label.style';
+
+<>
+  <Label
+    label="Label with all parts"
+    required
+    optional
+    infoIconProps={{ content: 'Info tooltip' }}
+  />
+  <Label label="Label 'required'" required />
+  <Label label="Label 'optional'" optional />
+  <Label label="Label with info icon" infoIconProps={{ content: 'Info tooltip' }} />
+  <Label
+    label={
+      <StoryHList $align="center" $gap="0.4rem">
+        <ShardIcon />
+        Label with <S.RichLabelContent>rich</S.RichLabelContent> content
+      </StoryHList>
+    }
+  />
+</>
+```
+
+### Readonly
+
+> Setting `readOnly` or the readonly field context renders the label in readonly mode.
+
+```tsx
+import { FieldReadonlyProvider, Input, Label } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Label
+    label="Label in normal mode"
+    required
+    optional
+    infoIconProps={{ content: 'Info tooltip' }}
+  />
+  <Label
+    label="Label in readonly mode"
+    required
+    optional
+    infoIconProps={{ content: 'Info tooltip' }}
+    readOnly
+  />
+  <FieldReadonlyProvider>
+    <Label
+      label="Label is readonly via context"
+      required
+      optional
+      infoIconProps={{ content: 'Info tooltip' }}
+    />
+    <Input readOnly style={{ display: 'none' }} />
+  </FieldReadonlyProvider>
+</>
+```
+
+### InfoIcon
+
+> `infoIconProps` accepts tooltip content props and the icon sizing prop.
+
+```tsx
+import { Label } from '@redislabsdev/redis-ui-components';
+import { useViewMode } from '../../helpers/useViewMode';
+import * as S from './Label.style';
+
+function Render() {
+  const { inStory } = useViewMode();
+
+  return (
+    <>
+      <Label label="Icon is hidden - empty tooltip" infoIconProps={{ content: '' }} />
+      <Label label="Icon size" infoIconProps={{ content: 'tooltip', size: 'S' }} />
+      <Label
+        label="Icon with custom tooltip content"
+        infoIconProps={{
+          content: (
+            <>
+              <S.LabelInfoIconHeading>Custom</S.LabelInfoIconHeading>
+              <S.LabelInfoIconBody>colored content</S.LabelInfoIconBody>
+              <S.LabelInfoIconText>
+                with <strong>textColor</strong> prop
+              </S.LabelInfoIconText>
+            </>
+          ),
+          placement: 'bottom',
+          defaultOpen: inStory
+        }}
+      />
+    </>
+  );
+}
+```
+
+### DefaultCompose
+
+> This is how the label is composed internally.
+
+```tsx
+import { Label } from '@redislabsdev/redis-ui-components';
+
+<Label.Compose>
+  <Label.Required show />
+  <Label.Text readOnly>Label</Label.Text>
+  <Label.Optional show />
+  <Label.InfoIcon text="Tooltip" />
+</Label.Compose>
+```
+
+### CustomCompose
+
+> You can customize any part without restrictions.
+
+```tsx
+import { Label, Link } from '@redislabsdev/redis-ui-components';
+import * as S from './Label.style';
+
+<Label.Compose>
+  <S.CustomLabelComposeWrapper>Custom Label Compose</S.CustomLabelComposeWrapper>
+  <S.LabelRequired />
+  <S.LabelOptional />
+  <S.LabelInfoIcon text="Tooltip Content Text" />
+  <Link external variant="inline" href="https://www.redis.com" />
+</Label.Compose>
+```
+
+### LabelWithEllipsisAndTooltip
+
+> Text of the label can use ellipsis and tooltip when there is not enough space.
+
+```tsx
+import { Label } from '@redislabsdev/redis-ui-components';
+
+<Label.Compose style={{ width: '20rem' }}>
+  <Label.Required />
+  <Label.Text ellipsis tooltipOnEllipsis style={{ flex: 1 }}>
+    Long Label to show ellipsis and tooltip
+  </Label.Text>
+  <Label.Optional />
+</Label.Compose>
+```
+
+## Notes
+
+- The default label only renders when at least one part is present.
+- `Label.Compose` resolves `htmlFor` through the shared id helper and is the internal wrapper used by the default label layout.
+- `Label.Text`, `Label.Required`, and `Label.Optional` are all body-typography-based building blocks.
+- `readOnly` also responds to `FieldReadonlyProvider`, not just the local prop.
+- `infoIconProps` accepts tooltip content props plus icon-related props such as `iconColor` and `size`.
+- Empty `infoIconProps.content` hides the info icon entirely.

package/skills/redis-ui-components/references/Link.md

@@ -0,0 +1,402 @@
+# Link
+
+A flexible link component that can behave like a button or inline anchor, supports optional icons, wrapping, disabled state, and a composed `LinkStyler` layout helper.
+
+## Import
+
+```tsx
+import { Link, LinkStyler } from '@redislabsdev/redis-ui-components';
+```
+
+If you use icons, import them from `@redislabsdev/redis-ui-icons`.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | `Read More` | Link content |
+| icon | `IconType` | - | Optional icon rendered inside the link |
+| external | `boolean` | `false` | Appends the external-link styling/icon behavior |
+| variant | `'button' \| 'inline'` | `button` | Link presentation variant |
+| size | `'M' \| 'S'` | `M` | Link size |
+| allowWrap | `boolean` | `false` | Allows the link content to wrap |
+| disabled | `boolean` | - | Disables the link and prevents interaction |
+| href | `string` | - | Anchor href; when omitted, the link behaves like a button |
+| onClick | `UIEventHandler` | - | Click handler used when the link behaves like a button |
+| other anchor props | `AnchorHTMLAttributes<HTMLAnchorElement>` | - | Remaining anchor props forwarded to the underlying link element |
+
+## Sub-components
+
+- `LinkStyler.LinkContent` - Content wrapper used by the composed styler.
+
+### `LinkStyler` Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `ReactNode` | required | Styled link content |
+| variant | `'button' \| 'inline'` | `button` | Link presentation variant |
+| size | `'M' \| 'S'` | `M` | Link size |
+| allowWrap | `boolean` | `false` | Allows wrapping |
+| className | `string` | - | Styled wrapper class name |
+
+### `LinkStyler.LinkContent` Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| icon | `IconType \| undefined` | - | Optional icon rendered before the link content |
+| external | `boolean \| undefined` | - | Appends the external-link icon after the content |
+| children | `ReactNode \| undefined` | - | Link content rendered inside the composed anchor |
+
+## Examples
+
+### Playground
+
+```tsx
+import { Link } from '@redislabsdev/redis-ui-components';
+
+<Link external disabled={false}>
+  Link
+</Link>
+```
+
+### ExternalLink
+
+> Setting `external` appends the external-link icon.
+
+```tsx
+import { Link } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Link href="#">Normal Link</Link>
+  <Link href="#" external>
+    With External link icon
+  </Link>
+</>
+```
+
+### Variants
+
+> Two variants are supported: `button` and `inline`. The default is `button`. Two sizes are supported: `M` and `S`.
+
+```tsx
+import { Link } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Link href="#" external>
+    Button - M (default)
+  </Link>
+  <Link href="#" external size="S">
+    Button - S
+  </Link>
+  <Link href="#" external variant="inline">
+    Inline - M
+  </Link>
+  <Link href="#" external variant="inline" size="S">
+    Inline - S
+  </Link>
+</>
+```
+
+### WithIcon
+
+> Use the `icon` prop to add an icon to the link.
+
+```tsx
+import { ContractIcon } from '@redislabsdev/redis-ui-icons';
+import { Link } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Link href="#" external icon={ContractIcon}>
+    Button - M (default)
+  </Link>
+  <Link href="#" external icon={ContractIcon} size="S">
+    Button - S
+  </Link>
+  <Link href="#" external icon={ContractIcon} variant="inline">
+    Inline - M
+  </Link>
+  <Link href="#" external icon={ContractIcon} variant="inline" size="S">
+    Inline - S
+  </Link>
+</>
+```
+
+### Disabled
+
+> Setting `disabled` disables focus, click, and keyboard interaction.
+
+```tsx
+import { ContractIcon } from '@redislabsdev/redis-ui-icons';
+import { Link } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Link href="#" external icon={ContractIcon} disabled>
+    Button - M (default)
+  </Link>
+  <Link href="#" external icon={ContractIcon} disabled size="S">
+    Button - S
+  </Link>
+  <Link href="#" external icon={ContractIcon} disabled variant="inline">
+    Inline - M
+  </Link>
+  <Link href="#" external icon={ContractIcon} disabled variant="inline" size="S">
+    Inline - S
+  </Link>
+</>
+```
+
+### AnchorAndButton
+
+> If `href` is set, `Link` behaves as an anchor. Otherwise it behaves like a button and uses `onClick`. If neither `href` nor `onClick` is defined, the link is disabled by default.
+
+```tsx
+import { Link } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Link href="#">href Link</Link>
+  <Link onClick={() => alert('Link clicked')}>onClick Link</Link>
+  <Link href="#" onClick={() => alert('Link clicked')}>
+    onClick & href Link
+  </Link>
+  <Link>None - Auto disabled</Link>
+</>
+```
+
+### Wrapping
+
+> Use `allowWrap` to let the link wrap in text flow or in constrained containers.
+
+```tsx
+import { ContractIcon } from '@redislabsdev/redis-ui-icons';
+import { Link } from '@redislabsdev/redis-ui-components';
+
+const baseProps = { href: '', onClick: () => false, icon: ContractIcon, external: true };
+
+<>
+  <div style={{ textDecoration: 'underline', maxWidth: '80rem' }}>
+    text text text text text text text text text text text text text text text text text text
+    text text text text text text{' '}
+    <Link {...baseProps} variant="inline" allowWrap>
+      Wrapping inline Link content
+    </Link>{' '}
+    text text text text text text text text text text text text text text text text text text
+    text text{' '}
+    <Link {...baseProps} variant="inline">
+      Non-wrapping inline Link content
+    </Link>{' '}
+    text text text text text text text text text text text text text text text{' '}
+    <Link {...baseProps} variant="button" allowWrap>
+      Wrapping button Link content
+    </Link>
+    text text text text text text text text text text text text text text text text text
+    <Link {...baseProps} variant="button">
+      Non-wrapping button Link content
+    </Link>
+    text text text text text text text text text text text text text text text text text
+  </div>
+  <div style={{ textDecoration: 'underline', maxWidth: '15rem' }}>
+    <div>
+      <Link {...baseProps} variant="inline" allowWrap>
+        Wrapping inline Link content
+      </Link>
+      <Link {...baseProps} variant="inline">
+        Non-wrapping inline Link content
+      </Link>
+      <Link {...baseProps} variant="button" allowWrap>
+        Wrapping button Link content
+      </Link>
+      <Link {...baseProps} variant="button">
+        Non-wrapping button Link content
+      </Link>
+    </div>
+  </div>
+</>
+```
+
+### LinkStyler Playground
+
+```tsx
+import { Link, LinkStyler } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Link href="#">Link</Link>
+  <LinkStyler>
+    <a href="#">
+      <LinkStyler.LinkContent>LinkStyler wrapped anchor</LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+</>
+```
+
+### LinkStyler ExternalLink
+
+> Setting `external` on the `LinkStyler.LinkContent` appends external link icon.
+
+```tsx
+import { LinkStyler } from '@redislabsdev/redis-ui-components';
+
+<>
+  <LinkStyler>
+    <a href="#">
+      <LinkStyler.LinkContent external>Normal Link</LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+  <LinkStyler>
+    <a href="#">
+      <LinkStyler.LinkContent external>With `external` icon</LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+</>
+```
+
+### LinkStyler Variants
+
+> Two variants are supported, `button` and `inline` (as native anchor). The default is `button`. Two sizes are supported, `M` and `S`. The default is `M`.
+
+```tsx
+import { LinkStyler } from '@redislabsdev/redis-ui-components';
+
+<>
+  <LinkStyler>
+    <a href="#">
+      <LinkStyler.LinkContent external>Button - M (default)</LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+  <LinkStyler size="S">
+    <a href="#">
+      <LinkStyler.LinkContent external>Button - S</LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+  <LinkStyler variant="inline">
+    <a href="#">
+      <LinkStyler.LinkContent external>Inline - M</LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+  <LinkStyler variant="inline" size="S">
+    <a href="#">
+      <LinkStyler.LinkContent external>Inline - S</LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+</>
+```
+
+### LinkStyler WithIcon
+
+> To add an icon to a link content, use the `icon` prop of `LinkStyler.LinkContent`.
+
+```tsx
+import { ContractIcon } from '@redislabsdev/redis-ui-icons';
+import { LinkStyler } from '@redislabsdev/redis-ui-components';
+
+<>
+  <LinkStyler>
+    <a href="#">
+      <LinkStyler.LinkContent external icon={ContractIcon}>
+        Button - M (default)
+      </LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+  <LinkStyler size="S">
+    <a href="#">
+      <LinkStyler.LinkContent external icon={ContractIcon}>
+        Button - S
+      </LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+  <LinkStyler variant="inline">
+    <a href="#">
+      <LinkStyler.LinkContent external icon={ContractIcon}>
+        Inline - M
+      </LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+  <LinkStyler variant="inline" size="S">
+    <a href="#">
+      <LinkStyler.LinkContent external icon={ContractIcon}>
+        Inline - S
+      </LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+</>
+```
+
+### LinkStyler Wrapping
+
+> To allow text wrapping, use the `allowWrap` property.
+> Wrapping behaves slightly differently for the `button` and `inline` variants.
+> While the `inline` variant wraps the content along with the containing text, the `button` variant wraps the content within the anchor block.
+
+```tsx
+import { ContractIcon } from '@redislabsdev/redis-ui-icons';
+import { LinkStyler } from '@redislabsdev/redis-ui-components';
+
+const renderLink = ({ children, ...props }) => (
+  <LinkStyler {...props}>
+    <a href="#">
+      <LinkStyler.LinkContent external icon={ContractIcon}>
+        {children}
+      </LinkStyler.LinkContent>
+    </a>
+  </LinkStyler>
+);
+
+<>
+  <div style={{ textDecoration: 'underline', maxWidth: '80rem' }}>
+    text text text text text text text text text text text text text text text text text text
+    text text text text text text{' '}
+    {renderLink({
+      variant: 'inline',
+      allowWrap: true,
+      children: 'Wrapping inline Link content'
+    })}{' '}
+    text text text text text text text text text text text text text text text text text text
+    text text{' '}
+    {renderLink({
+      variant: 'inline',
+      children: 'Non-wrapping inline Link content'
+    })}{' '}
+    text text text text text text text text text text text text text text text{' '}
+    {renderLink({
+      variant: 'button',
+      allowWrap: true,
+      children: 'Wrapping button Link content'
+    })}
+    text text text text text text text text text text text text text text text text text
+    {renderLink({
+      variant: 'button',
+      children: 'Non-Wrapping button Link content'
+    })}
+    text text text text text text text text text text text text text text text text text
+  </div>
+  <div style={{ textDecoration: 'underline', maxWidth: '15rem' }}>
+    <div>
+      {renderLink({
+        variant: 'inline',
+        allowWrap: true,
+        children: 'Wrapping inline Link content'
+      })}
+      {renderLink({
+        variant: 'inline',
+        children: 'Non-wrapping inline Link content'
+      })}
+      {renderLink({
+        variant: 'button',
+        allowWrap: true,
+        children: 'Wrapping button Link content'
+      })}
+      {renderLink({
+        variant: 'button',
+        children: 'Non-Wrapping button Link content'
+      })}
+    </div>
+  </div>
+</>
+```
+
+## Notes
+
+- `Link` defaults to the `button` variant and `M` size.
+- `disabled` prevents keyboard and pointer interaction whether `href` is present or not.
+- `LinkStyler` is available for custom composed link layouts.
+- `LinkStyler.LinkContent` appends the external arrow icon when `external` is set.
+- `LinkStyler` supports the same `button` and `inline` variants as `Link`, plus `allowWrap` and `size`.