@redis-ui/components 43.0.2 → 43.2.1

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

@@ -0,0 +1,139 @@
+# TextArea
+
+A multiline text input with validation states, read-only mode, and `FormField` integration for external labels and helper text.
+
+## Import
+
+```tsx
+import { TextArea } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| id | `string` | - | Custom id for the composed field and `FormField` association |
+| className | `string` | - | Class name applied to the composed wrapper |
+| style | `React.CSSProperties` | - | Inline style applied to the composed wrapper |
+| height | `string` | - | Explicit height for the composed textarea; falls back to theme-based sizing when omitted |
+| readOnly | `boolean` | `false` | Switches the field into read-only mode |
+| variant | `'outline' \| 'underline'` | `'outline'` | Visual variant of the composed field |
+| error | `React.ReactElement \| string` | - | Error content; enables error status and tooltip text |
+| valid | `boolean` | - | Enables valid/success status |
+| value | `string` | - | Controlled value |
+| defaultValue | `string` | - | Uncontrolled initial value |
+| onChange | `(value: string) => void` | - | Called when the text value changes |
+
+The component also accepts native `TextareaHTMLAttributes<HTMLTextAreaElement>` props, excluding `children`, `defaultValue`, `value`, and `onChange`.
+
+## Sub-components
+
+- `TextArea.Compose` - Composable wrapper that wires value, status, read-only rendering, and layout state.
+- `TextArea.Tag` - The underlying textarea element used by the composed field.
+- `TextArea.StatusIndicator` - Status icon shown for valid and error states.
+- `TextArea.ReadonlyValue` - Read-only renderer used by the compose API.
+
+## Examples
+
+### Playground
+
+```tsx
+import { TextArea } from '@redislabsdev/redis-ui-components';
+
+const value = `A grasshopper spent the summer hopping about in the sun and singing to his heart's content. One day, an ant went hurrying by, looking very hot and weary. "Why are you working on such a lovely day?" said the grasshopper. "I'm collecting food for the winter," said the ant, "and I suggest you do the same."`;
+
+<TextArea
+  placeholder="TextArea"
+  id="custom-id"
+  disabled={false}
+  defaultValue={value}
+  style={{ maxWidth: '44rem' }}
+/>
+```
+
+### Status
+
+> Use `valid` to show the success state. Set `error` to show the error state and tooltip text. Error takes priority over valid.
+
+```tsx
+import { TextArea } from '@redislabsdev/redis-ui-components';
+
+<>
+  Valid status
+  <TextArea placeholder="Text Area" valid />
+  Error status
+  <TextArea placeholder="Text Area" error="Error message" />
+</>
+```
+
+### DisabledAndReadonly
+
+> `disabled` and `readOnly` switch the component into those modes. Read-only mode shows only the value and ignores the other indicators. Read-only takes priority over disabled.
+
+```tsx
+import { TextArea } from '@redislabsdev/redis-ui-components';
+
+const value = `A grasshopper spent the summer hopping about in the sun and singing to his heart's content. One day, an ant went hurrying by, looking very hot and weary. "Why are you working on such a lovely day?" said the grasshopper. "I'm collecting food for the winter," said the ant, "and I suggest you do the same."`;
+
+<>
+  Disabled
+  <TextArea disabled />
+  Disabled with value
+  <TextArea disabled defaultValue={value} />
+  Disabled with indicators
+  <TextArea disabled defaultValue={value} error="Error message" />
+  Read only
+  <TextArea value={value} readOnly />
+</>
+```
+
+### WithLabel
+
+> TextArea does not include an internal label or other external decoration. Wrap it with `FormField` for those cases. If you pass a custom `id`, `FormField` uses it; otherwise it generates and connects one automatically. The custom `id` must start with a letter. `FormField` also passes status and some state down to the TextArea.
+
+```tsx
+import { FormField, TextArea } from '@redislabsdev/redis-ui-components';
+
+const value = `A grasshopper spent the summer hopping about in the sun and singing to his heart's content. One day, an ant went hurrying by, looking very hot and weary. "Why are you working on such a lovely day?" said the grasshopper. "I'm collecting food for the winter," said the ant, "and I suggest you do the same."`;
+
+<>
+  <FormField label="FormField Label with custom id">
+    <TextArea placeholder="Text Area" id="custom-id" />
+  </FormField>
+  <FormField
+    label="FormField Label with auto-generated id"
+    additionalText="FormField additional text"
+  >
+    <TextArea placeholder="Text Area" />
+  </FormField>
+  <FormField
+    label="FormField Label with read-only mode"
+    additionalText="FormField additional text"
+  >
+    <TextArea value={value} readOnly />
+  </FormField>
+</>
+```
+
+### Variants
+
+```tsx
+import { FormField, TextArea } from '@redislabsdev/redis-ui-components';
+
+<>
+  <FormField label="Outline (default)" additionalText="outline">
+    <TextArea placeholder="Text Area" />
+  </FormField>
+  <FormField label="Underline" additionalText="underline">
+    <TextArea placeholder="Text Area" variant="underline" />
+  </FormField>
+</>
+```
+
+## Notes
+
+- `error` overrides `valid` when both are present.
+- `readOnly` overrides `disabled` when both are present.
+- Use `FormField` when you need a label, helper text, or automatic id wiring.
+- A custom `id` used with `FormField` must start with a letter.
+- The component forwards refs to the underlying `<textarea>` element.

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

@@ -0,0 +1,217 @@
+# TextButton
+
+A text-styled button component with small and medium sizes, multiple visual variants, and inline variants for use inside body copy. It forwards refs and supports icon composition through `Button.Icon`.
+
+## Import
+```tsx
+import { TextButton } from '@redislabsdev/redis-ui-components';
+```
+
+> Icons used in examples are imported separately from `@redislabsdev/redis-ui-icons`.
+
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| size | `'medium' \| 'small'` | `'medium'` | Button size |
+| variant | `'primary' \| 'destructive' \| 'secondary' \| 'upsell' \| 'primary-inline' \| 'destructive-inline' \| 'secondary-inline' \| 'upsell-inline'` | `'primary'` | Visual style variant |
+| children | `React.ReactNode` | - | Button content |
+| disabled | `boolean` | `false` | Disables the button and prevents interaction |
+| onClick | `(e: React.MouseEvent<HTMLButtonElement>) => void` | - | Click handler |
+
+The component also extends all native `ButtonHTMLAttributes<HTMLButtonElement>` props.
+
+## Examples
+
+### Playground
+```tsx
+import { TextButton } from '@redislabsdev/redis-ui-components';
+
+<TextButton size="medium" variant="primary" disabled={false}>
+  Text Button
+</TextButton>
+```
+
+### Sizes
+```tsx
+import { TextButton, Button } from '@redislabsdev/redis-ui-components';
+import { ContractIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <TextButton size="small">
+    <Button.Icon icon={ContractIcon} />
+    Primary small
+  </TextButton>
+  <TextButton size="small" variant="destructive">
+    <Button.Icon icon={ContractIcon} />
+    Destructive small
+  </TextButton>
+  <TextButton size="small" variant="secondary">
+    <Button.Icon icon={ContractIcon} />
+    Secondary small
+  </TextButton>
+  <TextButton size="small" variant="upsell">
+    <Button.Icon icon={ContractIcon} />
+    Upsell small
+  </TextButton>
+  <TextButton size="small" variant="primary-inline">
+    <Button.Icon icon={ContractIcon} />
+    Primary Inline small
+  </TextButton>
+  <TextButton size="small" variant="destructive-inline">
+    <Button.Icon icon={ContractIcon} />
+    Destructive Inline small
+  </TextButton>
+  <TextButton size="small" variant="secondary-inline">
+    <Button.Icon icon={ContractIcon} />
+    Secondary Inline small
+  </TextButton>
+  <TextButton size="small" variant="upsell-inline">
+    <Button.Icon icon={ContractIcon} />
+    Upsell Inline small
+  </TextButton>
+  <TextButton size="medium">
+    <Button.Icon icon={ContractIcon} />
+    Primary medium
+  </TextButton>
+  <TextButton size="medium" variant="destructive">
+    <Button.Icon icon={ContractIcon} />
+    Destructive medium
+  </TextButton>
+  <TextButton size="medium" variant="secondary">
+    <Button.Icon icon={ContractIcon} />
+    Secondary medium
+  </TextButton>
+  <TextButton size="medium" variant="upsell">
+    <Button.Icon icon={ContractIcon} />
+    Upsell medium
+  </TextButton>
+  <TextButton size="medium" variant="primary-inline">
+    <Button.Icon icon={ContractIcon} />
+    Primary Inline medium
+  </TextButton>
+  <TextButton size="medium" variant="destructive-inline">
+    <Button.Icon icon={ContractIcon} />
+    Destructive Inline medium
+  </TextButton>
+  <TextButton size="medium" variant="secondary-inline">
+    <Button.Icon icon={ContractIcon} />
+    Secondary Inline medium
+  </TextButton>
+  <TextButton size="medium" variant="upsell-inline">
+    <Button.Icon icon={ContractIcon} />
+    Upsell Inline medium
+  </TextButton>
+</>
+```
+
+### Variants
+> 8 total variants are supported: primary, destructive, secondary, upsell, and their inline counterparts. The default is `primary`.
+```tsx
+import { TextButton } from '@redislabsdev/redis-ui-components';
+
+<>
+  <TextButton>Primary</TextButton>
+  <TextButton variant="destructive">Destructive</TextButton>
+  <TextButton variant="secondary">Secondary</TextButton>
+  <TextButton variant="upsell">Upsell</TextButton>
+  <TextButton variant="primary-inline">Primary Inline</TextButton>
+  <TextButton variant="destructive-inline">Destructive Inline</TextButton>
+  <TextButton variant="secondary-inline">Secondary Inline</TextButton>
+  <TextButton variant="upsell-inline">Upsell Inline</TextButton>
+</>
+```
+
+### Disabled
+> Buttons can be disabled by setting the `disabled` prop to `true`. This will disable any hover styles and prevent click events from firing.
+```tsx
+import { TextButton } from '@redislabsdev/redis-ui-components';
+
+<>
+  <TextButton disabled>Primary</TextButton>
+  <TextButton disabled variant="destructive">
+    Destructive
+  </TextButton>
+  <TextButton disabled variant="secondary">
+    Secondary
+  </TextButton>
+  <TextButton disabled variant="upsell">
+    Upsell
+  </TextButton>
+  <TextButton disabled variant="primary-inline">
+    Primary Inline
+  </TextButton>
+  <TextButton disabled variant="destructive-inline">
+    Destructive Inline
+  </TextButton>
+  <TextButton disabled variant="secondary-inline">
+    Secondary Inline
+  </TextButton>
+  <TextButton disabled variant="upsell-inline">
+    Upsell Inline
+  </TextButton>
+</>
+```
+
+### WithIcon
+> To add an icon to a TextButton, use the `Button.Icon` component. This component can be placed anywhere inside the `TextButton` component. It will automatically be sized and colored to match its parent TextButton.
+>
+> Do not use this component if you need a round icon-only Button. Instead, use the IconButton or ActionIconButton components.
+>
+> If you need to pass props to the icon element you should declare it as a separate component.
+>
+> Do not declare components inside other components (like an inline arrow function or any other way), or at least wrap them in `useMemo`, otherwise it will cause re-render of the element on every render of the parent component.
+```tsx
+import { TextButton, Button } from '@redislabsdev/redis-ui-components';
+import { ContractIcon, MarketplaceIcon, ShardIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <TextButton>
+    <Button.Icon icon={ContractIcon} />
+    Left Icon
+  </TextButton>
+  <TextButton variant="primary-inline">
+    Right Icon
+    <Button.Icon icon={MarketplaceIcon} />
+  </TextButton>
+  <TextButton>
+    <Button.Icon icon={ShardIcon} />
+  </TextButton>
+  <TextButton>
+    <Button.Icon icon={ShardIcon} customSize="2.8rem" />
+    Custom icon size
+  </TextButton>
+  <TextButton variant="destructive">
+    <Button.Icon icon={ContractIcon} />
+    Destructive
+  </TextButton>
+  <TextButton variant="upsell">
+    <Button.Icon icon={ContractIcon} />
+    Upsell
+  </TextButton>
+  <TextButton variant="destructive-inline">
+    <Button.Icon icon={ContractIcon} />
+    Destructive Inline
+  </TextButton>
+  <TextButton variant="upsell-inline">
+    <Button.Icon icon={ContractIcon} />
+    Upsell Inline
+  </TextButton>
+</>
+```
+
+### Inline
+> Inline text buttons are designed to be used within text content. They have no padding or background and inherit the line height from their parent. Primary, destructive, and upsell variants are available.
+```tsx
+import { TextButton } from '@redislabsdev/redis-ui-components';
+
+<div style={{ fontSize: '1.4rem', lineHeight: '2rem' }}>
+  This is a paragraph with an{' '}
+  <TextButton variant="primary-inline">inline primary button</TextButton>, an{' '}
+  <TextButton variant="destructive-inline">inline destructive button</TextButton>, and an{' '}
+  <TextButton variant="upsell-inline">inline upsell button</TextButton> embedded within the text.
+</div>
+```
+
+## Notes
+- The button renders with `type="button"` by default.
+- `TextButton` forwards refs to the underlying `<button>` element.