@rescui/tag 0.13.7 → 0.13.9-RUI-293-Update-menu-component-7a032357e.20

package/llm/components/tag.md

@@ -0,0 +1,685 @@
+# Tag
+
+Tags allow users to filter content, and they can also be useful for drawing attention to particular components.
+
+## Usage
+
+### Features showcase
+
+### Examples
+
+```tsx
+import { Tag, presets } from '@rescui/tag';
+
+<Tag {...presets['classic-light']}>Tag</Tag>;
+```
+
+#### Custom appearance
+
+```tsx
+import { Tag } from '@rescui/tag';
+
+<Tag color="white" backgroundColor="purple">
+  Tag
+</Tag>;
+```
+
+#### Custom outline appearance
+
+```tsx
+import { Tag } from '@rescui/tag';
+
+<Tag color="black" borderColor="purple">
+  Tag
+</Tag>;
+```
+
+#### Preset extension
+
+```tsx
+import { Tag, presets } from '@rescui/tag';
+
+<Tag {...presets['classic-light']} backgroundColor="red">
+  Tag
+</Tag>;
+```
+
+#### Make your own presets set
+
+```tsx
+import { Tag, presets as basePresets } from '@rescui/tag';
+
+const presets = {
+  ...basePresets,
+  space: { color: 'white', backgroundColor: 'purple' }
+};
+
+render(<Tag {...presets.space}>Tag</Tag>);
+```
+
+#### Change size
+
+```tsx
+import { Tag, presets } from '@rescui/tag';
+
+<Tag {...presets['classic-light']} size="m">
+  Tag
+</Tag>;
+```
+
+#### Uppercase mode
+
+```tsx
+import { Tag, presets } from '@rescui/tag';
+
+<Tag {...presets['classic-light']} isUppercase>
+  Tag
+</Tag>;
+```
+
+#### Add icon
+
+```tsx
+import { Tag, presets } from '@rescui/tag';
+import { DownloadOutlineIcon } from '@rescui/icons';
+
+<div className="rs-docs-row rs-docs-row_vertical-center">
+  <Tag {...presets['classic-light']} className="rs-docs-col" icon={<DownloadOutlineIcon />}>
+    Icon on the left
+  </Tag>
+  <span className="rs-docs-col">or</span>
+  <Tag
+    {...presets['classic-light']}
+    className="rs-docs-col"
+    icon={<DownloadOutlineIcon />}
+    iconPosition="right"
+  >
+    Icon on the right
+  </Tag>
+</div>;
+```
+
+#### Add external icon
+
+If you want to add your own icon, please make sure that the icon has `24×24px` box size
+
+Also, icon should have one `className` props.
+
+```tsx
+import { Tag, presets } from '@rescui/tag';
+
+const SettingsIcon = ({ className }) => (
+  <svg className={className} width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 3L4 7.5v9l8 4.5 8-4.5v-9zm.01 13.005a4 4 0 1 1 3.998-4 4 4 0 0 1-3.999 4z" />
+  </svg>
+);
+
+const Demo = () => (
+  <div className="rs-docs-row rs-docs-row_vertical-center">
+    <Tag
+      {...presets['classic-light']}
+      className="rs-docs-col"
+      icon={<SettingsIcon />}
+    >
+      External icon on the left
+    </Tag>
+    <span className="rs-docs-col">or</span>
+    <Tag
+      {...presets['classic-light']}
+      className="rs-docs-col"
+      icon={<SettingsIcon />}
+      iconPosition="right"
+    >
+      External icon on the right
+    </Tag>
+  </div>
+);
+
+render(<Demo />);
+```
+
+## StickyTag
+
+### Features showcase
+
+### Examples
+
+```tsx
+import { StickyTag, presets } from '@rescui/tag';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <div style={{ width: 300, marginTop: 24 }}>
+      <StickyTag content="Sale" {...presets['classic-light']}>
+        <div className={cardCn({ theme: 'light' })}>
+          <h3 className={textCn('rs-h3')}>Card content</h3>
+          <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+            amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
+            numquam odio perspiciatis provident quas quo, ratione saepe sunt.
+            Tempora.
+          </p>
+        </div>
+      </StickyTag>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Custom appearance
+
+```tsx
+import { StickyTag } from '@rescui/tag';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <div style={{ width: 300, marginTop: 24 }}>
+      <StickyTag content="Sale" color="white" backgroundColor="purple">
+        <div className={cardCn({ theme: 'light' })}>
+          <h3 className={textCn('rs-h3')}>Card content</h3>
+          <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+            amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
+            numquam odio perspiciatis provident quas quo, ratione saepe sunt.
+            Tempora.
+          </p>
+        </div>
+      </StickyTag>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Change size
+
+```tsx
+import { StickyTag, presets } from '@rescui/tag';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <div style={{ width: 300, marginTop: 24 }}>
+      <StickyTag content="Sale" {...presets['classic-light']} size={'m'}>
+        <div className={cardCn({ theme: 'light' })}>
+          <h3 className={textCn('rs-h3')}>Card content</h3>
+          <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+            amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
+            numquam odio perspiciatis provident quas quo, ratione saepe sunt.
+            Tempora.
+          </p>
+        </div>
+      </StickyTag>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Change placement
+
+```tsx
+import { StickyTag, presets } from '@rescui/tag';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <div style={{ width: 300, marginLeft: 24 }}>
+      <StickyTag
+        content="Sale"
+        {...presets['classic-light']}
+        placement="left-start"
+      >
+        <div className={cardCn({ theme: 'light' })}>
+          <h3 className={textCn('rs-h3')}>Card content</h3>
+          <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+            amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
+            numquam odio perspiciatis provident quas quo, ratione saepe sunt.
+            Tempora.
+          </p>
+        </div>
+      </StickyTag>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Change align
+
+```tsx
+import { StickyTag, presets } from '@rescui/tag';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <div style={{ width: 300, marginTop: 24 }}>
+      <StickyTag content="Sale" {...presets['classic-light']} align="middle">
+        <div className={cardCn({ theme: 'light' })}>
+          <h3 className={textCn('rs-h3')}>Card content</h3>
+          <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+            amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
+            numquam odio perspiciatis provident quas quo, ratione saepe sunt.
+            Tempora.
+          </p>
+        </div>
+      </StickyTag>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Change offset
+
+```tsx
+import { StickyTag, presets } from '@rescui/tag';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <div style={{ width: 300, marginTop: 24 }}>
+      <StickyTag content="Sale" {...presets['classic-light']} offset={16}>
+        <div className={cardCn({ theme: 'light' })}>
+          <h3 className={textCn('rs-h3')}>Card content</h3>
+          <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+            amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
+            numquam odio perspiciatis provident quas quo, ratione saepe sunt.
+            Tempora.
+          </p>
+        </div>
+      </StickyTag>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Uppercase mode
+
+```tsx
+import { StickyTag, presets } from '@rescui/tag';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const Demo = () => {
+  return (
+    <div style={{ width: 300, marginTop: 24 }}>
+      <StickyTag content="Sale" {...presets['classic-light']} isUppercase>
+        <div className={cardCn({ theme: 'light' })}>
+          <h3 className={textCn('rs-h3')}>Card content</h3>
+          <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+            amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
+            numquam odio perspiciatis provident quas quo, ratione saepe sunt.
+            Tempora.
+          </p>
+        </div>
+      </StickyTag>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Add icon
+
+```tsx
+import { StickyTag, presets } from '@rescui/tag';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+import { PresentIcon } from '@rescui/icons';
+
+const Demo = () => {
+  return (
+    <div style={{ width: 300, marginTop: 24 }}>
+      <StickyTag
+        content="Sale"
+        {...presets['classic-light']}
+        icon={<PresentIcon />}
+      >
+        <div className={cardCn({ theme: 'light' })}>
+          <h3 className={textCn('rs-h3')}>Card content</h3>
+          <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+            amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
+            numquam odio perspiciatis provident quas quo, ratione saepe sunt.
+            Tempora.
+          </p>
+        </div>
+      </StickyTag>
+    </div>
+  );
+};
+
+render(<Demo />);
+```
+
+## RemovableTag
+
+### Features showcase
+
+### Examples
+
+`onRemoveClick` is a required prop.
+
+```tsx
+import { RemovableTag } from '@rescui/tag';
+
+<RemovableTag onRemoveClick={() => console.log('removed')}>
+  Test Tag
+</RemovableTag>;
+```
+
+#### Change size
+
+```tsx
+import { RemovableTag } from '@rescui/tag';
+
+<RemovableTag size="m" onRemoveClick={() => console.log('removed')}>
+  Small Tag
+</RemovableTag>;
+```
+
+#### Disabled
+
+```tsx
+import { RemovableTag } from '@rescui/tag';
+
+<RemovableTag disabled onRemoveClick={() => console.log('removed')}>
+  Disabled Tag
+</RemovableTag>;
+```
+
+#### With icon
+
+```tsx
+import { RemovableTag } from '@rescui/tag';
+import { PersonOutlineIcon } from '@rescui/icons';
+
+<RemovableTag icon={<PersonOutlineIcon />} onRemoveClick={() => console.log('removed')}>
+  Tag
+</RemovableTag>;
+```
+
+## CSS Mixins API
+
+#### `Tag` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-tag-size-xs` | prop: `size`<br><br>value: `"xs"` |
+| `rs-tag-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-tag-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-tag-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-tag-align-icon-left` | prop: `iconPosition`<br><br>value: `"left"` |
+| `rs-tag-align-icon-right` | prop: `iconPosition`<br><br>value: `"right"` |
+| `rs-tag-uppercase-true` | prop: `isUppercase`<br><br>value: `true` |
+| `rs-tag-uppercase-false` | prop: `isUppercase`<br><br>value: `false` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { Tag, presets } from '@rescui/tag';
+import { PersonIcon } from '@rescui/icons';
+
+const MyTag = ({ className }) => {
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <Tag
+        {...presets['classic-light']}
+        size={'m'}
+        icon={<PersonIcon />}
+        className={className}
+      >
+        Tag
+      </Tag>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyTag />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyTag className={`my-tag-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyTag className={`my-tag-var-1 my-tag-var-2`} />
+    </div>
+  </div>
+);
+```
+
+```postcss
+@import '@rescui/tag/lib/public-api.p.css';
+
+.my-tag-var-1 {
+  @mixin rs-tag-size-l;
+  @mixin rs-tag-align-icon-right;
+  @mixin rs-tag-uppercase-true;
+}
+.my-tag-var-2 {
+  @mixin rs-tag-size-xs;
+  @mixin rs-tag-align-icon-left;
+  @mixin rs-tag-uppercase-false;
+}
+```
+
+#### `StickyTag` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-sticky-tag-size-xs` | prop: `size`<br><br>value: `"xs"` |
+| `rs-sticky-tag-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-sticky-tag-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-sticky-tag-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-sticky-tag-align-icon-left` | prop: `iconPosition`<br><br>value: `"left"` |
+| `rs-sticky-tag-align-icon-right` | prop: `iconPosition`<br><br>value: `"right"` |
+| `rs-sticky-tag-uppercase-true` | prop: `isUppercase`<br><br>value: `true` |
+| `rs-sticky-tag-uppercase-false` | prop: `isUppercase`<br><br>value: `false` |
+| `rs-sticky-tag-offset-16` | prop: `offset`<br><br>value: `16` |
+| `rs-sticky-tag-offset-24` | prop: `offset`<br><br>value: `24` |
+| `rs-sticky-tag-offset-32` | prop: `offset`<br><br>value: `32` |
+| `rs-sticky-tag-align-top` | prop: `align`<br><br>value: `"top"` |
+| `rs-sticky-tag-align-middle` | prop: `align`<br><br>value: `"middle"` |
+| `rs-sticky-tag-placement-top-start` | prop: `placement`<br><br>value: `"top-start"` |
+| `rs-sticky-tag-placement-top-end` | prop: `placement`<br><br>value: `"top-end"` |
+| `rs-sticky-tag-placement-left-start` | prop: `placement`<br><br>value: `"left-start"` |
+| `rs-sticky-tag-placement-left-end` | prop: `placement`<br><br>value: `"left-end"` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { StickyTag, presets } from '@rescui/tag';
+import { PersonIcon } from '@rescui/icons';
+import { textCn } from '@rescui/typography';
+import { cardCn } from '@rescui/card';
+
+const MyStickyTag = ({ className }) => {
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)', maxWidth: 400 }}>
+      <StickyTag
+        content="Sale"
+        {...presets['classic-light']}
+        icon={<PersonIcon />}
+        className={className}
+      >
+        <div className={cardCn({ theme: 'light' })}>
+          <h3 className={textCn('rs-h3')}>Card content</h3>
+          <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+            amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
+            numquam odio perspiciatis provident quas quo, ratione saepe sunt.
+            Tempora.
+          </p>
+        </div>
+      </StickyTag>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyStickyTag />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyStickyTag className={`my-sticky-tag-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyStickyTag className={`my-sticky-tag-var-1 my-sticky-tag-var-2`} />
+    </div>
+  </div>
+);
+```
+
+```postcss attached
+@import '@rescui/tag/lib/public-api.p.css';
+
+.my-sticky-tag-var-1 {
+  @mixin rs-sticky-tag-size-l;
+  @mixin rs-sticky-tag-align-icon-right;
+  @mixin rs-sticky-tag-uppercase-true;
+  @mixin rs-sticky-tag-offset-32;
+  @mixin rs-sticky-tag-align-middle;
+  @mixin rs-sticky-tag-placement-top-start;
+}
+.my-sticky-tag-var-2 {
+  @mixin rs-sticky-tag-size-m;
+  @mixin rs-sticky-tag-align-icon-left;
+  @mixin rs-sticky-tag-uppercase-false;
+  @mixin rs-sticky-tag-offset-16;
+  @mixin rs-sticky-tag-align-top;
+  @mixin rs-sticky-tag-placement-left-end;
+}
+```
+
+#### `RemovableTag` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-removable-tag-size-xs` | prop: `size`<br><br>value: `"xs"` |
+| `rs-removable-tag-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-removable-tag-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-removable-tag-size-l` | prop: `size`<br><br>value: `"l"` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { RemovableTag } from '@rescui/tag';
+
+const MyRemovableTag = ({ className }) => {
+  return (
+    <div
+      style={{
+        padding: 12,
+        backgroundColor: 'var(--rs-color-black-t5)'
+      }}
+    >
+      <RemovableTag
+        onRemoveClick={() => console.log('removed')}
+        className={className}
+      >
+        Test Tag
+      </RemovableTag>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyRemovableTag />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyRemovableTag className={`my-removable-tag-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyRemovableTag
+        className={`my-removable-tag-var-1 my-removable-tag-var-2`}
+      />
+    </div>
+  </div>
+);
+```
+
+```postcss
+@import '@rescui/tag/lib/public-api.p.css';
+
+.my-removable-tag-var-1 {
+  @mixin rs-removable-tag-size-l;
+}
+.my-removable-tag-var-2 {
+  @mixin rs-removable-tag-size-m;
+}
+```
+
+## Presets
+
+### Presets
+
+Use presets for styling tags when possible.
+
+#### Example
+
+```tsx
+import { Tag, presets } from '@rescui/tag';
+
+<Tag {...presets['classic-light']}>Tag</Tag>;
+```
+
+#### For light theme
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `classic-light` | { color: "#FFFFFF"; backgroundColor: "var(--rs-color-primary-light-theme, #6B57FF)"; } |  | Primary background |
+| `rock-light` | { color: "#FFFFFF"; backgroundColor: "#19191C"; } |  | Contrast background |
+| `filled-light` | { color: "rgba(25,25,28,0.7)"; backgroundColor: "rgba(25,25,28,0.1)"; } |  | Grey background |
+| `outline-light` | { color: "#19191C"; borderColor: "#19191C"; } |  | Transparent with border |
+
+#### For dark theme
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `classic-dark` | { color: "#FFFFFF"; backgroundColor: "var(--rs-color-primary-dark-theme, #8473FF)"; } |  | Primary background |
+| `rock-dark` | { color: "#19191C"; backgroundColor: "#FFFFFF"; } |  | Contrast background |
+| `filled-dark` | { color: "rgba(255,255,255,0.7)"; backgroundColor: "rgba(255,255,255,0.1)"; } |  | Grey background |
+| `outline-dark` | { color: "#FFFFFF"; borderColor: "#FFFFFF"; } |  | Transparent with border |

package/llm/index.md

@@ -0,0 +1,2 @@
+- Components and Hooks
+  - [Tag](./components/tag.md)