@redis-ui/components 44.0.2 → 46.1.2

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

@@ -5,7 +5,7 @@ A percentage progress bar with color variants, optional text positioning, and an
 ## Import
 
 ```tsx
-import { ProgressBar } from '@redislabsdev/redis-ui-components';
+import { ProgressBar } from '@redis-ui/components';
 ```
 
 ## Props
@@ -23,7 +23,7 @@ import { ProgressBar } from '@redislabsdev/redis-ui-components';
 ### Playground
 
 ```tsx
-import { ProgressBar } from '@redislabsdev/redis-ui-components';
+import { ProgressBar } from '@redis-ui/components';
 
 <ProgressBar value={25} />
 ```
@@ -33,7 +33,7 @@ import { ProgressBar } from '@redislabsdev/redis-ui-components';
 > Use `variant` to apply a color scheme.
 
 ```tsx
-import { ProgressBar } from '@redislabsdev/redis-ui-components';
+import { ProgressBar } from '@redis-ui/components';
 
 <>
   <ProgressBar value={30} />
@@ -48,7 +48,7 @@ import { ProgressBar } from '@redislabsdev/redis-ui-components';
 > 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';
+import { ProgressBar } from '@redis-ui/components';
 
 <>
   <ProgressBar value={50} />
@@ -64,7 +64,7 @@ import { ProgressBar } from '@redislabsdev/redis-ui-components';
 > Fractional values are rounded to one decimal place when displayed.
 
 ```tsx
-import { ProgressBar } from '@redislabsdev/redis-ui-components';
+import { ProgressBar } from '@redis-ui/components';
 
 <>
   <ProgressBar textPosition="top" value={5.12345} />
@@ -78,7 +78,7 @@ import { ProgressBar } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { useState } from 'react';
-import { ProgressBar, RadioGroup } from '@redislabsdev/redis-ui-components';
+import { ProgressBar, RadioGroup } from '@redis-ui/components';
 
 function Example() {
   const [value, setValue] = useState(0);

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

@@ -5,7 +5,7 @@ A quantity input with status indicators, validation controls, read-only renderin
 ## Import
 
 ```tsx
-import { QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { QuantityCounter } from '@redis-ui/components';
 ```
 
 ## Props
@@ -128,7 +128,7 @@ This is the shared read-only text wrapper used by custom read-only renderers. It
 ### Basic Usage
 
 ```tsx
-import { QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { QuantityCounter } from '@redis-ui/components';
 
 <QuantityCounter placeholder="QuantityCounter" id="custom-id" disabled={false} valueLabel="MB" />;
 ```
@@ -142,7 +142,7 @@ import { QuantityCounter } from '@redislabsdev/redis-ui-components';
 > Error status overrides valid status.
 
 ```tsx
-import { QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { QuantityCounter } from '@redis-ui/components';
 
 <>
   Valid status
@@ -161,7 +161,7 @@ import { QuantityCounter } from '@redislabsdev/redis-ui-components';
 > Read-only overrides disabled.
 
 ```tsx
-import { QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { QuantityCounter } from '@redis-ui/components';
 
 <>
   Disabled
@@ -184,7 +184,7 @@ import { QuantityCounter } from '@redislabsdev/redis-ui-components';
 > Conditional disabling works if range bounds are defined with `min` and `max`.
 
 ```tsx
-import { QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { QuantityCounter } from '@redis-ui/components';
 
 <>
   Forcibly disabled increment button (not recommended)
@@ -217,7 +217,7 @@ import { QuantityCounter } from '@redislabsdev/redis-ui-components';
 > `FormField` also inherits status and some states from the nested input.
 
 ```tsx
-import { FormField, QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { FormField, QuantityCounter } from '@redis-ui/components';
 
 <>
   <FormField label="FormField Label with custom id">
@@ -241,7 +241,7 @@ import { FormField, QuantityCounter } from '@redislabsdev/redis-ui-components';
 ### Variants
 
 ```tsx
-import { FormField, QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { FormField, QuantityCounter } from '@redis-ui/components';
 
 <>
   <FormField label="Outline (default)" additionalText="outline">
@@ -260,7 +260,7 @@ import { FormField, QuantityCounter } from '@redislabsdev/redis-ui-components';
 > `QuantityCounter` auto-sizes out of the box.
 
 ```tsx
-import { QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { QuantityCounter } from '@redis-ui/components';
 
 <>
   Type text in the input boxes to see how it auto-sizes
@@ -282,7 +282,7 @@ import { QuantityCounter } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { useState } from 'react';
-import { FormField, QuantityCounter, Switch } from '@redislabsdev/redis-ui-components';
+import { FormField, QuantityCounter, Switch } from '@redis-ui/components';
 import { ConstraintsGroup } from '../InputStories.style';
 
 const defValueLabel = 'MB';
@@ -398,7 +398,7 @@ function Render() {
 ### ComposeReadOnly
 
 ```tsx
-import { QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { QuantityCounter } from '@redis-ui/components';
 
 <QuantityCounter.Compose readOnly defaultValue={123.1} valueLabel="MB">
   <QuantityCounter.StepButton action="decrement" />
@@ -419,7 +419,7 @@ import { QuantityCounter } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { useEffect, useState } from 'react';
-import { Button, FormField, QuantityCounter, Select } from '@redislabsdev/redis-ui-components';
+import { Button, FormField, QuantityCounter, Select } from '@redis-ui/components';
 
 const defValueLabel = 'MB';
 const options = [{ value: 'MB' }, { value: 'GB' }, { value: 'TB' }];
@@ -474,7 +474,7 @@ function Render({ disabled, ...args }) {
 
 ```tsx
 import { useEffect, useState } from 'react';
-import { Button, FormField, Input, QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { Button, FormField, Input, QuantityCounter } from '@redis-ui/components';
 
 const defValueLabel = 'MB';
 
@@ -535,7 +535,7 @@ function Render({ disabled, ...args }) {
 > This example shows the old look of `QuantityCounter`.
 
 ```tsx
-import { QuantityCounter } from '@redislabsdev/redis-ui-components';
+import { QuantityCounter } from '@redis-ui/components';
 
 <QuantityCounter.Compose defaultValue={123.1} valueLabel="MB">
   <QuantityCounter.InputGroup valueLabel="MB" style={{ justifyContent: 'flex-start' }} />

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

@@ -4,7 +4,7 @@ A compound radio group for selecting a single option from a list. It supports co
 
 ## Import
 ```tsx
-import { RadioGroup } from '@redislabsdev/redis-ui-components';
+import { RadioGroup } from '@redis-ui/components';
 ```
 
 ## Props
@@ -79,7 +79,7 @@ The component also accepts standard `HTMLAttributes<HTMLDivElement>` passthrough
 
 ### Basic Usage
 ```tsx
-import { RadioGroup } from '@redislabsdev/redis-ui-components';
+import { RadioGroup } from '@redis-ui/components';
 
 const items = [
   { value: '1', label: 'Item 1' },
@@ -93,7 +93,7 @@ const items = [
 ### Controlled
 > Use `value` and `onChange` props to control `RadioGroup` state
 ```tsx
-import { Button, RadioGroup } from '@redislabsdev/redis-ui-components';
+import { Button, RadioGroup } from '@redis-ui/components';
 import { useState } from 'react';
 
 const items = [
@@ -119,7 +119,7 @@ function Example() {
 ### Layout
 > Set `layout` prop to `"horizontal"` to have horizontal layout. Vertical layout is default.
 ```tsx
-import { RadioGroup } from '@redislabsdev/redis-ui-components';
+import { RadioGroup } from '@redis-ui/components';
 
 const items = [
   { value: '1', label: 'Item 1' },
@@ -136,7 +136,7 @@ const items = [
 ### Readonly
 > In readonly mode items appear as normal, but the user cannot change the selection
 ```tsx
-import { RadioGroup } from '@redislabsdev/redis-ui-components';
+import { RadioGroup } from '@redis-ui/components';
 
 const items = [
   { value: '1', label: 'Item 1' },
@@ -150,7 +150,7 @@ const items = [
 ### Disabled
 > Use `disabled` prop of the `RadioGroup` to turn all items to disabled mode
 ```tsx
-import { RadioGroup } from '@redislabsdev/redis-ui-components';
+import { RadioGroup } from '@redis-ui/components';
 
 const items = [
   { value: '1', label: 'Item 1' },
@@ -164,7 +164,7 @@ const items = [
 ### WithinFormField
 > `RadioGroup` can be used together with `FormField` and `Label` components.
 ```tsx
-import { FormField, RadioGroup } from '@redislabsdev/redis-ui-components';
+import { FormField, RadioGroup } from '@redis-ui/components';
 
 const items = [
   { value: '1', label: 'Item 1' },
@@ -186,7 +186,7 @@ const items = [
 ### ItemsData
 > Without composition, items are generated from item data, which allows you to define a value, label, disabled state and custom id
 ```tsx
-import { RadioGroup } from '@redislabsdev/redis-ui-components';
+import { RadioGroup } from '@redis-ui/components';
 
 const radioGroupItems = [
   { label: 'Item 1', value: '1' },
@@ -205,7 +205,7 @@ const radioGroupItems = [
 > `RadioGroup` can be composed of `Item`s.
 > In this case, each `Item` is defined as component rather than as plain data.
 ```tsx
-import { RadioGroup } from '@redislabsdev/redis-ui-components';
+import { RadioGroup } from '@redis-ui/components';
 
 <RadioGroup.Compose>
   <RadioGroup.Item label="Item 1" value="1" />
@@ -225,7 +225,7 @@ import { RadioGroup } from '@redislabsdev/redis-ui-components';
 > `RadioGroup` allows to compose each item separately.<br>
 > `Item.Indicator` and `Item.Label` can be customized and used with other custom components
 ```tsx
-import { Label, RadioGroup } from '@redislabsdev/redis-ui-components';
+import { Label, RadioGroup } from '@redis-ui/components';
 
 <RadioGroup.Compose defaultValue="1" layout="horizontal">
   <RadioGroup.Item.Compose value="1">

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

@@ -5,7 +5,7 @@ An invisible announcement helper for screen readers with configurable live regio
 ## Import
 
 ```tsx
-import { ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+import { ScreenReaderAnnounce } from '@redis-ui/components';
 ```
 
 ## Props
@@ -24,7 +24,7 @@ import { ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
 ### Playground
 
 ```tsx
-import { ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+import { ScreenReaderAnnounce } from '@redis-ui/components';
 
 <ScreenReaderAnnounce text="This is a screen reader announcement" allowAnnounce />
 ```
@@ -35,7 +35,7 @@ import { ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { useState } from 'react';
-import { Button, ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+import { Button, ScreenReaderAnnounce } from '@redis-ui/components';
 
 function Example() {
   const [text, setText] = useState('Initial text');
@@ -54,7 +54,7 @@ function Example() {
 > Use `allowAnnounce=true` to force announcement on first render.
 
 ```tsx
-import { ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+import { ScreenReaderAnnounce } from '@redis-ui/components';
 
 <>
   <div>This will announce immediately</div>
@@ -68,7 +68,7 @@ import { ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { useState } from 'react';
-import { Button, ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+import { Button, ScreenReaderAnnounce } from '@redis-ui/components';
 
 function Example() {
   const [text, setText] = useState('Initial text');
@@ -88,7 +88,7 @@ function Example() {
 
 ```tsx
 import { useState } from 'react';
-import { Button, ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+import { Button, ScreenReaderAnnounce } from '@redis-ui/components';
 
 function Example() {
   const [politeText, setPoliteText] = useState('Polite announcement');
@@ -114,7 +114,7 @@ function Example() {
 
 ```tsx
 import { useState } from 'react';
-import { Button, ScreenReaderAnnounce } from '@redislabsdev/redis-ui-components';
+import { Button, ScreenReaderAnnounce } from '@redis-ui/components';
 
 function Example() {
   const [statusText, setStatusText] = useState('Status announcement');

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

@@ -5,12 +5,12 @@ Composite search bar for table screens that combines search, filters, column sel
 ## Import
 
 ```tsx
-import { SearchBar, type ColumnOption } from '@redislabsdev/redis-ui-components';
+import { SearchBar, type ColumnOption } from '@redis-ui/components';
 ```
 
-> Composition examples also use icons from `@redislabsdev/redis-ui-icons`:
+> Composition examples also use icons from `@redis-ui/icons`:
 > ```tsx
-> import { ExportIcon, RefreshIcon } from '@redislabsdev/redis-ui-icons';
+> import { ExportIcon, RefreshIcon } from '@redis-ui/icons';
 > ```
 
 ## Props
@@ -131,7 +131,7 @@ import { SearchBar, type ColumnOption } from '@redislabsdev/redis-ui-components'
 
 ```tsx
 import { useArgState } from '../../helpers/useArgState';
-import { SearchBar } from '@redislabsdev/redis-ui-components';
+import { SearchBar } from '@redis-ui/components';
 
 function Render(args) {
   const [activeFilters, setActiveFilters] = useArgState({
@@ -174,7 +174,7 @@ function Render(args) {
 
 ```tsx
 import { useState } from 'react';
-import { SearchBar } from '@redislabsdev/redis-ui-components';
+import { SearchBar } from '@redis-ui/components';
 
 function Render() {
   const [searchValue, setSearchValue] = useState('');
@@ -201,8 +201,8 @@ function Render() {
 
 ```tsx
 import { useState } from 'react';
-import { IconButton, SearchBar } from '@redislabsdev/redis-ui-components';
-import { ExportIcon, RefreshIcon } from '@redislabsdev/redis-ui-icons';
+import { IconButton, SearchBar } from '@redis-ui/components';
+import { ExportIcon, RefreshIcon } from '@redis-ui/icons';
 
 function Render() {
   const [activeFilters, setActiveFilters] = useState(defaultFilters);

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

@@ -5,12 +5,12 @@ Composable search input with validation, reset, loading, and `FormField` support
 ## Import
 
 ```tsx
-import { SearchInput } from '@redislabsdev/redis-ui-components';
+import { SearchInput } from '@redis-ui/components';
 ```
 
 > If the component uses icons in examples, also note:
 > ```tsx
-> import { SearchIcon } from '@redislabsdev/redis-ui-icons';
+> import { SearchIcon } from '@redis-ui/icons';
 > ```
 
 ## Props
@@ -44,7 +44,7 @@ The component also accepts standard `input` attributes on the inner tag via `Res
 ### Playground
 
 ```tsx
-import { SearchInput } from '@redislabsdev/redis-ui-components';
+import { SearchInput } from '@redis-ui/components';
 
 <SearchInput placeholder="SearchInput" type="text" id="custom-id" disabled={false} />
 ```
@@ -100,7 +100,7 @@ import { SearchInput } from '@redislabsdev/redis-ui-components';
 > `FormField` also inherits status and some states from the input.
 
 ```tsx
-import { FormField, SearchInput } from '@redislabsdev/redis-ui-components';
+import { FormField, SearchInput } from '@redis-ui/components';
 
 <>
   <FormField label="FormField Label with custom id">
@@ -118,7 +118,7 @@ import { FormField, SearchInput } from '@redislabsdev/redis-ui-components';
 ### Variants
 
 ```tsx
-import { FormField, SearchInput } from '@redislabsdev/redis-ui-components';
+import { FormField, SearchInput } from '@redis-ui/components';
 
 <>
   <FormField label="Outline (default)" additionalText="outline">
@@ -149,8 +149,8 @@ import { FormField, SearchInput } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { useState, type KeyboardEvent } from 'react';
-import { ActionIconButton, FormField, SearchInput } from '@redislabsdev/redis-ui-components';
-import { SearchIcon } from '@redislabsdev/redis-ui-icons';
+import { ActionIconButton, FormField, SearchInput } from '@redis-ui/components';
+import { SearchIcon } from '@redis-ui/icons';
 
 function Render() {
   const [token, setToken] = useState('');

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

@@ -5,7 +5,7 @@ Composable section container with a header, optional collapsible body, and optio
 ## Import
 
 ```tsx
-import { Section } from '@redislabsdev/redis-ui-components';
+import { Section } from '@redis-ui/components';
 ```
 
 ## Props
@@ -113,7 +113,7 @@ import { Section } from '@redislabsdev/redis-ui-components';
 > Default story showing the root `Section` API with a label, body content, actions, summary, and collapsible state enabled.
 
 ```tsx
-import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+import { Section, TextButton } from '@redis-ui/components';
 
 <Section
   label="Section Label"
@@ -130,7 +130,7 @@ import { Section, TextButton } from '@redislabsdev/redis-ui-components';
 > If `content` is provided and `collapsible` is not enabled, the section stays statically expanded.
 
 ```tsx
-import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+import { Section, TextButton } from '@redis-ui/components';
 
 <Section
   label="Statically expanded (non-collapsible)"
@@ -144,7 +144,7 @@ import { Section, TextButton } from '@redislabsdev/redis-ui-components';
 > Collapsed state changes only work when both `content` and `collapsible` are set.
 
 ```tsx
-import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+import { Section, TextButton } from '@redis-ui/components';
 
 <Section
   label="Collapsible (initially openened)"
@@ -161,7 +161,7 @@ import { Section, TextButton } from '@redislabsdev/redis-ui-components';
 
 ```tsx
 import { useState } from 'react';
-import { Section } from '@redislabsdev/redis-ui-components';
+import { Section } from '@redis-ui/components';
 
 function Example() {
   const [open, setOpen] = useState(true);
@@ -183,7 +183,7 @@ function Example() {
 > `summary` can be a simple string and is visible only when the section is collapsed.
 
 ```tsx
-import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+import { Section, TextButton } from '@redis-ui/components';
 
 <Section
   label="Collapsible with Summary"
@@ -199,7 +199,7 @@ import { Section, TextButton } from '@redislabsdev/redis-ui-components';
 > `summary` can render any React node.
 
 ```tsx
-import { Section, ChipList, TextButton } from '@redislabsdev/redis-ui-components';
+import { Section, ChipList, TextButton } from '@redis-ui/components';
 import { StoryHList } from '../../helpers/Story.style';
 import * as S from './Section.style';
 
@@ -230,7 +230,7 @@ const chips = [
 > `summaryAlwaysVisible` keeps the summary bar visible even when the section is open.
 
 ```tsx
-import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+import { Section, TextButton } from '@redis-ui/components';
 
 <Section
   label="Collapsible with always visible Summary"
@@ -250,7 +250,7 @@ import { Section, TextButton } from '@redislabsdev/redis-ui-components';
 > If `collapsible` is not set, the summary background matches the content background.
 
 ```tsx
-import { Section, TextButton } from '@redislabsdev/redis-ui-components';
+import { Section, TextButton } from '@redis-ui/components';
 
 <>
   <Section
@@ -272,7 +272,7 @@ import { Section, TextButton } from '@redislabsdev/redis-ui-components';
 > Use `CategoryValueList` for category-value pair summaries.
 
 ```tsx
-import { CategoryValueList, Label, Section, TextButton } from '@redislabsdev/redis-ui-components';
+import { CategoryValueList, Label, Section, TextButton } from '@redis-ui/components';
 
 const categoryValueList = [
   { category: 'Category 1', value: 'Value 1', key: '1' },
@@ -309,7 +309,7 @@ const categoryValueList = [
 > Use `Header.Label` for the title, `Header.CollapseButton` for the toggle arrow, and `Header.ActionButton` for one or more actions.
 
 ```tsx
-import { Badge, Button, Checkbox, Label, Section } from '@redislabsdev/redis-ui-components';
+import { Badge, Button, Checkbox, Label, Section } from '@redis-ui/components';
 import { StoryHList } from '../../helpers/Story.style';
 
 <Section.Compose collapsible>