@redis-ui/components 42.8.0 → 43.2.1

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

@@ -0,0 +1,65 @@
+# ProfileIcon
+
+Avatar-style icon that renders initials from a full name and uses email to derive a stable color palette.
+
+## Import
+
+```tsx
+import { ProfileIcon } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| fullName | `string` | - | Name used to derive the initials shown inside the icon. |
+| size | `'S' \| 'M' \| 'L' \| AnyOtherString \| number` | required | Icon size. Supports Redis UI sizes or a custom rem value. |
+| email | `string` | - | Email used to derive the icon colors. The same email resolves to the same color set. |
+| other div props | `React.HTMLAttributes<HTMLDivElement>` | - | Standard `div` props forwarded to the rendered wrapper. |
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import { ProfileIcon } from '@redislabsdev/redis-ui-components';
+
+<ProfileIcon fullName="John Smith" email="john.smith@redis.com" size="L" />
+```
+
+### OptionalProperties
+
+> `ProfileIcon` can be rendered with only the `size` prop. `fullName` is used to generate the initials, and `email` is used to generate the colors. The same email always resolves to the same colors.
+
+```tsx
+import { ProfileIcon } from '@redislabsdev/redis-ui-components';
+
+<>
+  <ProfileIcon size="M" />
+  <ProfileIcon size="M" email="john.smith@redis.com" />
+  <ProfileIcon size="M" fullName="John Smith" />
+  <ProfileIcon size="M" email="john.smith@redis.com" fullName="John Smith" />
+  <ProfileIcon size="M" email="Tianna.Carney@redis.org" fullName="Tianna Carney" />
+</>
+```
+
+### Sizes
+
+> `size` can be a t-shirt size or a custom rem value.
+
+```tsx
+import { ProfileIcon } from '@redislabsdev/redis-ui-components';
+
+<>
+  <ProfileIcon size="S" email="john.smith@redis.io" fullName="John Smith" />
+  <ProfileIcon size="M" email="john.smith@redis.io" fullName="John Smith" />
+  <ProfileIcon size="L" email="john.smith@redis.io" fullName="John Smith" />
+  <ProfileIcon size="5rem" email="john.smith@redis.io" fullName="John Smith" />
+</>
+```
+
+## Notes
+
+- `fullName` controls the initials rendered inside the icon.
+- `email` controls the color group selection and keeps the same palette for the same address.
+- `size` accepts `S`, `M`, `L`, or a custom rem value.

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

@@ -0,0 +1,103 @@
+# ProgressBar
+
+A percentage progress bar with color variants, optional text positioning, and animated value updates.
+
+## Import
+
+```tsx
+import { ProgressBar } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| value | `number` | required | Current progress value; values are clamped to `0`-`100` |
+| textPosition | `'top' \| 'left' \| 'bottom' \| 'right'` | - | Position of the percentage text |
+| size | `'M'` | `'M'` | Progress bar size |
+| variant | `'normal' \| 'danger' \| 'attention' \| 'success'` | `'normal'` | Visual color variant |
+| textIndicationPosition | `'top' \| 'left' \| 'bottom' \| 'right'` | - | Deprecated alias for `textPosition` |
+
+## Examples
+
+### Playground
+
+```tsx
+import { ProgressBar } from '@redislabsdev/redis-ui-components';
+
+<ProgressBar value={25} />
+```
+
+### Variants
+
+> Use `variant` to apply a color scheme.
+
+```tsx
+import { ProgressBar } from '@redislabsdev/redis-ui-components';
+
+<>
+  <ProgressBar value={30} />
+  <ProgressBar variant="attention" value={50} />
+  <ProgressBar variant="danger" value={70} />
+  <ProgressBar variant="success" value={90} />
+</>
+```
+
+### TextPositions
+
+> Set `textPosition` to align the percentage text relative to the bar. If `textPosition` is not set, the text remains hidden.
+
+```tsx
+import { ProgressBar } from '@redislabsdev/redis-ui-components';
+
+<>
+  <ProgressBar value={50} />
+  <ProgressBar textPosition="top" value={50} />
+  <ProgressBar textPosition="bottom" value={50} />
+  <ProgressBar textPosition="left" value={50} />
+  <ProgressBar textPosition="right" value={50} />
+</>
+```
+
+### TextFormatting
+
+> Fractional values are rounded to one decimal place when displayed.
+
+```tsx
+import { ProgressBar } from '@redislabsdev/redis-ui-components';
+
+<>
+  <ProgressBar textPosition="top" value={5.12345} />
+  <ProgressBar textPosition="top" value={30.0} />
+</>
+```
+
+### Animation
+
+> Changing `value` animates the progress bar.
+
+```tsx
+import { useState } from 'react';
+import { ProgressBar, RadioGroup } from '@redislabsdev/redis-ui-components';
+
+function Example() {
+  const [value, setValue] = useState(0);
+
+  return (
+    <>
+      <ProgressBar value={value} textPosition="right" />
+      <RadioGroup.Compose onChange={(newValue) => setValue(parseInt(newValue, 10))} defaultValue="0%">
+        <RadioGroup.Item value="0%" defaultChecked />
+        <RadioGroup.Item value="50%" />
+        <RadioGroup.Item value="100%" />
+      </RadioGroup.Compose>
+    </>
+  );
+}
+```
+
+## Notes
+
+- `value` is clamped to the `0`-`100` range and displayed with one decimal when needed.
+- `textIndicationPosition` is deprecated in favor of `textPosition`.
+- The text is hidden entirely when no text position is provided.