@rescui/checkbox 0.11.0 → 0.11.1-RUI-296-Build-docs-md-files-for-each-docs-section-b138dd5bf.19

package/lib/parts/checkbox-list.d.ts

@@ -1,28 +1,28 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import CSS from 'csstype';
-export declare type CheckboxListProps = {
-    className?: string;
-    id?: string;
-    style?: CSS.Properties;
-    mode?: 'classic' | 'rock';
-    size?: 's' | 'm' | 'l';
-    onChange?: (val: string[]) => void;
-    value?: string[];
-    defaultValue?: string[];
-    label?: React.ReactNode;
-    note?: React.ReactNode;
-    /** Error flag or message */
-    error?: React.ReactNode;
-    /**
-     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
-     * If `false`, there will be no reservation.
-     */
-    reserveErrorLine?: boolean;
-    boldLabel?: boolean;
-    theme?: Theme;
-    disabled?: boolean;
-    children?: React.ReactNode;
-};
-declare const CheckboxList: React.FC<CheckboxListProps>;
-export default CheckboxList;
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import CSS from 'csstype';
+export type CheckboxListProps = {
+    className?: string;
+    id?: string;
+    style?: CSS.Properties;
+    mode?: 'classic' | 'rock';
+    size?: 's' | 'm' | 'l';
+    onChange?: (val: string[]) => void;
+    value?: string[];
+    defaultValue?: string[];
+    label?: React.ReactNode;
+    note?: React.ReactNode;
+    /** Error flag or message */
+    error?: React.ReactNode;
+    /**
+     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
+     * If `false`, there will be no reservation.
+     */
+    reserveErrorLine?: boolean;
+    boldLabel?: boolean;
+    theme?: Theme;
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+declare const CheckboxList: React.FC<CheckboxListProps>;
+export default CheckboxList;

package/lib/parts/checkbox-list.p.module.css.js

@@ -1,16 +1,16 @@
 var styles = {
-  "themeLight": "_themeLight_1x23dsr_6",
-  "themeDark": "_themeDark_1x23dsr_9",
-  "container": "_container_1x23dsr_13",
-  "sizeS": "_sizeS_1x23dsr_18",
-  "sizeM": "_sizeM_1x23dsr_21",
-  "sizeL": "_sizeL_1x23dsr_24",
-  "inner": "_inner_1x23dsr_28",
-  "label": "_label_1x23dsr_32",
-  "disabled": "_disabled_1x23dsr_39",
-  "footer": "_footer_1x23dsr_44",
-  "errorMessage": "_errorMessage_1x23dsr_49",
-  "error": "_error_1x23dsr_49",
-  "note": "_note_1x23dsr_58"
+  "themeLight": "_themeLight_6v3o7_6",
+  "themeDark": "_themeDark_6v3o7_9",
+  "container": "_container_6v3o7_13",
+  "sizeS": "_sizeS_6v3o7_18",
+  "sizeM": "_sizeM_6v3o7_21",
+  "sizeL": "_sizeL_6v3o7_24",
+  "inner": "_inner_6v3o7_28",
+  "label": "_label_6v3o7_32",
+  "disabled": "_disabled_6v3o7_39",
+  "footer": "_footer_6v3o7_44",
+  "errorMessage": "_errorMessage_6v3o7_49",
+  "error": "_error_6v3o7_49",
+  "note": "_note_6v3o7_58"
 };
 export { styles as default };

package/lib/parts/checkbox-manager.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-export declare type CheckboxManagerProps = {
-    onChange: (val: string[]) => void;
-    value: string[];
-    defaultValue: string[];
-    isError?: boolean;
-    theme: Theme;
-    size: 's' | 'm' | 'l';
-    mode: 'classic' | 'rock';
-    disabled?: boolean;
-    children?: React.ReactNode;
-};
-declare const CheckboxManager: React.FC<CheckboxManagerProps>;
-export default CheckboxManager;
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+export type CheckboxManagerProps = {
+    onChange: (val: string[]) => void;
+    value: string[];
+    defaultValue: string[];
+    isError?: boolean;
+    theme: Theme;
+    size: 's' | 'm' | 'l';
+    mode: 'classic' | 'rock';
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+declare const CheckboxManager: React.FC<CheckboxManagerProps>;
+export default CheckboxManager;

package/lib/parts/checkbox.p.module.css.js

@@ -1,25 +1,25 @@
 var styles = {
-  "themeLight": "_themeLight_w4grzm_8",
-  "themeDark": "_themeDark_w4grzm_11",
-  "checkboxSizeS": "_checkboxSizeS_w4grzm_15",
-  "checkboxSizeM": "_checkboxSizeM_w4grzm_18",
-  "checkboxSizeL": "_checkboxSizeL_w4grzm_21",
-  "sizeS": "_sizeS_w4grzm_25",
-  "sizeM": "_sizeM_w4grzm_28",
-  "sizeL": "_sizeL_w4grzm_31",
-  "classic": "_classic_w4grzm_35",
-  "rock": "_rock_w4grzm_38",
-  "checkbox": "_checkbox_w4grzm_15",
-  "input": "_input_w4grzm_65",
-  "icon": "_icon_w4grzm_76",
-  "enabled": "_enabled_w4grzm_93",
-  "indeterminate": "_indeterminate_w4grzm_97",
-  "disabled": "_disabled_w4grzm_105",
-  "error": "_error_w4grzm_134",
-  "checkmark": "_checkmark_w4grzm_161",
-  "markS": "_markS_w4grzm_186",
-  "markM": "_markM_w4grzm_189",
-  "markL": "_markL_w4grzm_192",
-  "errorMessage": "_errorMessage_w4grzm_196"
+  "themeLight": "_themeLight_a1kdxa_8",
+  "themeDark": "_themeDark_a1kdxa_11",
+  "checkboxSizeS": "_checkboxSizeS_a1kdxa_15",
+  "checkboxSizeM": "_checkboxSizeM_a1kdxa_18",
+  "checkboxSizeL": "_checkboxSizeL_a1kdxa_21",
+  "sizeS": "_sizeS_a1kdxa_25",
+  "sizeM": "_sizeM_a1kdxa_28",
+  "sizeL": "_sizeL_a1kdxa_31",
+  "classic": "_classic_a1kdxa_35",
+  "rock": "_rock_a1kdxa_38",
+  "checkbox": "_checkbox_a1kdxa_15",
+  "input": "_input_a1kdxa_65",
+  "icon": "_icon_a1kdxa_76",
+  "enabled": "_enabled_a1kdxa_93",
+  "indeterminate": "_indeterminate_a1kdxa_97",
+  "disabled": "_disabled_a1kdxa_105",
+  "error": "_error_a1kdxa_134",
+  "checkmark": "_checkmark_a1kdxa_161",
+  "markS": "_markS_a1kdxa_186",
+  "markM": "_markM_a1kdxa_189",
+  "markL": "_markL_a1kdxa_192",
+  "errorMessage": "_errorMessage_a1kdxa_196"
 };
 export { styles as default };

package/lib/parts/group-context.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import { CheckboxSize } from './checkbox-control-inner';
-export declare type GroupContextValue = {
-    value: string[];
-    addToValue?: (val: string) => void;
-    removeFromValue?: (val: string) => void;
-    inGroup: boolean;
-    handleCheckboxChange?: React.ChangeEventHandler<HTMLInputElement>;
-    isError?: boolean;
-    errorId?: string;
-    theme?: Theme;
-    size?: CheckboxSize;
-    mode?: 'classic' | 'rock';
-    disabled?: boolean;
-};
-export declare const GroupContext: React.Context<GroupContextValue>;
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import { CheckboxSize } from './checkbox-control-inner';
+export type GroupContextValue = {
+    value: string[];
+    addToValue?: (val: string) => void;
+    removeFromValue?: (val: string) => void;
+    inGroup: boolean;
+    handleCheckboxChange?: React.ChangeEventHandler<HTMLInputElement>;
+    isError?: boolean;
+    errorId?: string;
+    theme?: Theme;
+    size?: CheckboxSize;
+    mode?: 'classic' | 'rock';
+    disabled?: boolean;
+};
+export declare const GroupContext: React.Context<GroupContextValue>;

package/lib/parts/marks.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-export declare type MarkProps = {
-    className?: string;
-    'data-test'?: string;
-};
-export declare const MarkS: React.FC<MarkProps>;
-export declare const MarkM: React.FC<MarkProps>;
-export declare const MarkL: React.FC<MarkProps>;
-export declare const Mark: React.FC<MarkProps>;
+import React from 'react';
+export type MarkProps = {
+    className?: string;
+    'data-test'?: string;
+};
+export declare const MarkS: React.FC<MarkProps>;
+export declare const MarkM: React.FC<MarkProps>;
+export declare const MarkL: React.FC<MarkProps>;
+export declare const Mark: React.FC<MarkProps>;

package/lib/parts/use-backward-compatible-id.d.ts

@@ -1,4 +1,4 @@
-export declare const useBackwardCompatibleId: {
-    (): string | number;
-    counter: number;
-};
+export declare const useBackwardCompatibleId: {
+    (): string | number;
+    counter: number;
+};

package/llm/components/checkbox.md

@@ -0,0 +1,437 @@
+# Checkbox
+
+Checkboxes allow users to select one or more items from a set of options.
+
+## CheckboxList
+
+### Features showcase
+
+### CheckboxList
+
+Is a special component to quickly retrieve array of selected values:
+
+```tsx
+import { useState } from 'react';
+import { Checkbox, CheckboxList } from '@rescui/checkbox';
+
+const Demo = () => {
+  const [groupValue, setGroupValue] = useState(['item2']);
+  return (
+    <>
+      <CheckboxList value={groupValue} onChange={setGroupValue}>
+        <Checkbox value="item1">
+          I'm not ready to pay for it, and my trial has ended
+        </Checkbox>
+        <Checkbox value="item2">
+          Just changing PC / job / client machine
+        </Checkbox>
+        <Checkbox value="item3">
+          Reinstalling / upgrading / upgrading Rider
+        </Checkbox>
+        <Checkbox value="item4">
+          The reason has nothing to do with the product
+        </Checkbox>
+      </CheckboxList>
+
+      <p>{JSON.stringify(groupValue)}</p>
+    </>
+  );
+};
+
+render(<Demo />);
+```
+
+#### With default value
+
+```tsx
+import { Checkbox, CheckboxList } from '@rescui/checkbox';
+
+const Demo = () => {
+  return (
+    <CheckboxList defaultValue={['item3', 'item1']}>
+      <Checkbox value="item1">
+        I'm not ready to pay for it, and my trial has ended
+      </Checkbox>
+      <Checkbox value="item2">Just changing PC / job / client machine</Checkbox>
+      <Checkbox value="item3">
+        Reinstalling / upgrading / upgrading Rider
+      </Checkbox>
+      <Checkbox value="item4">
+        The reason has nothing to do with the product
+      </Checkbox>
+    </CheckboxList>
+  );
+};
+
+render(<Demo />);
+```
+
+#### With a custom list
+
+```tsx
+import { CheckboxControl, CheckboxManager } from '@rescui/checkbox';
+
+<CheckboxManager>
+  <p>
+    <label style={{ display: 'flex', alignItems: 'center' }}>
+      <span className="rs-text-2" style={{ marginRight: 8 }}>
+        custom description 1:
+      </span>
+      <CheckboxControl notUseLabelTag value="1" />
+    </label>
+  </p>
+  <p>
+    <label style={{ display: 'flex', alignItems: 'center' }}>
+      <span className="rs-text-2" style={{ marginRight: 8 }}>
+        custom description 2:
+      </span>
+      <CheckboxControl notUseLabelTag value="2" />
+    </label>
+  </p>
+</CheckboxManager>;
+```
+
+#### Conditional Input
+
+CSS variable `--rs-out-checkbox-list-left-offset` is used to indent nested `CheckboxList`. It is available only inside `CheckboxList` component.
+
+```tsx
+import { useState } from 'react';
+import { Checkbox, CheckboxList } from '@rescui/checkbox';
+import { Input } from '@rescui/input';
+
+const Demo = () => {
+  const [groupValue, setGroupValue] = useState(['other']);
+  const [otherValue, setOtherValue] = useState('');
+  return (
+    <CheckboxList
+      value={groupValue}
+      onChange={setGroupValue}
+      style={{ maxWidth: 400 }}
+      label="Are you using Rider under license?"
+    >
+      <Checkbox value="yes">Yes, I have a Rider license</Checkbox>
+      <Checkbox value="other">Other</Checkbox>
+      {groupValue.includes('other') && (
+        <Input
+          style={{
+            marginLeft: 'var(--rs-out-checkbox-list-left-offset)'
+          }}
+          placeholder="Please enter your reason"
+          value={otherValue}
+          onChange={e => setOtherValue(e.target.value)}
+        />
+      )}
+    </CheckboxList>
+  );
+};
+
+render(<Demo />);
+```
+
+#### Nested CheckboxList
+
+CSS variable `--rs-out-checkbox-list-left-offset` is used to indent nested `CheckboxList`. It is available only inside `CheckboxList` component.
+
+This demo also shows a complex state management to sync nested `CheckboxList` with the outer `CheckboxList`.
+
+```tsx
+import { useState } from 'react';
+import { Checkbox, CheckboxList } from '@rescui/checkbox';
+
+const INNER_VALUES = ['item1', 'item2'];
+const INNER_LIST_VALUE = 'no';
+
+const Demo = () => {
+  const [outerValue, setOuterValue] = useState([]);
+  const [innerValue, setInnerValue] = useState([INNER_VALUES[1]]);
+
+  const handleOuterChange = newOuterValue => {
+    setOuterValue(newOuterValue);
+
+    const isInnerOptionChecked = value => value.includes(INNER_LIST_VALUE);
+
+    if (
+      isInnerOptionChecked(newOuterValue) &&
+      !isInnerOptionChecked(outerValue)
+    ) {
+      // When "no" is checked, check all nested items
+      setInnerValue(INNER_VALUES);
+    } else if (
+      !isInnerOptionChecked(newOuterValue) &&
+      isInnerOptionChecked(outerValue)
+    ) {
+      // When "no" is unchecked, uncheck all nested items
+      setInnerValue([]);
+    }
+  };
+
+  const handleInnerChange = newInnerValue => {
+    setInnerValue(newInnerValue);
+
+    const outerValueWithoutInnerOption = outerValue.filter(
+      v => v !== INNER_LIST_VALUE
+    );
+
+    if (newInnerValue.length < INNER_VALUES.length) {
+      // If any nested items are unchecked, uncheck "no"
+      setOuterValue(outerValueWithoutInnerOption);
+    } else {
+      // Otherwise, check "no"
+      setOuterValue([...outerValueWithoutInnerOption, INNER_LIST_VALUE]);
+    }
+  };
+
+  return (
+    <CheckboxList
+      value={outerValue}
+      onChange={handleOuterChange}
+      label="Are you using Rider under license?"
+    >
+      <Checkbox value="yes">Yes, I have a Rider license</Checkbox>
+      <Checkbox value={INNER_LIST_VALUE} indeterminate={innerValue.length > 0}>
+        No, I'm still on my 30-day trial
+      </Checkbox>
+      <CheckboxList
+        value={innerValue}
+        onChange={handleInnerChange}
+        style={{
+          marginLeft: 'var(--rs-out-checkbox-list-left-offset)'
+        }}
+      >
+        <Checkbox value={INNER_VALUES[0]}>
+          I'm not ready to pay for it, and my trial has ended
+        </Checkbox>
+        <Checkbox value={INNER_VALUES[1]}>
+          The reason has nothing to do with the product
+        </Checkbox>
+      </CheckboxList>
+    </CheckboxList>
+  );
+};
+
+render(<Demo />);
+```
+
+## Usage
+
+### Features showcase
+
+### Controlled checkbox
+
+```tsx
+import { Checkbox } from '@rescui/checkbox';
+import { useState } from 'react';
+
+const Demo = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <>
+      <Checkbox checked={checked} onChange={e => setChecked(e.target.checked)}>
+        Checkbox
+      </Checkbox>
+      <div>Checkbox {checked ? 'checked' : 'unchecked'}</div>
+    </>
+  );
+};
+
+render(<Demo />);
+```
+
+#### With `label` on the outside
+
+```tsx
+import { CheckboxControl } from '@rescui/checkbox';
+
+<label style={{ display: 'flex', alignItems: 'center' }}>
+  <span className="rs-text-2" style={{ marginRight: 8 }}>
+    custom description:
+  </span>
+  <CheckboxControl notUseLabelTag value="item" />
+</label>;
+```
+
+## CSS Mixins API
+
+#### `CheckboxList` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-checkbox-list-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-checkbox-list-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-checkbox-list-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-checkbox-list-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-checkbox-list-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { Checkbox, CheckboxList } from '@rescui/checkbox';
+import { useState } from 'react';
+
+const MyCheckboxList = ({ className }) => {
+  const [groupValue, setGroupValue] = useState(['item2']);
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <CheckboxList
+        value={groupValue}
+        onChange={setGroupValue}
+        className={className}
+      >
+        <Checkbox value="item1">Option 1</Checkbox>
+        <Checkbox value="item2">Option 2</Checkbox>
+      </CheckboxList>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyCheckboxList />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyCheckboxList className={`my-checkbox-list-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyCheckboxList
+        className={`my-checkbox-list-var-1 my-checkbox-list-var-2`}
+      />
+    </div>
+  </div>
+);
+```
+
+```postcss
+@import '@rescui/checkbox/lib/public-api.p.css';
+
+.my-checkbox-list-var-1 {
+  @mixin rs-checkbox-list-size-l;
+  @mixin rs-checkbox-list-mode-rock;
+}
+.my-checkbox-list-var-2 {
+  @mixin rs-checkbox-list-size-s;
+  @mixin rs-checkbox-list-mode-classic;
+}
+```
+
+#### `Checkbox` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-checkbox-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-checkbox-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-checkbox-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-checkbox-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-checkbox-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { Checkbox } from '@rescui/checkbox';
+
+const MyCheckbox = ({ className }) => {
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <Checkbox className={className} defaultChecked>
+        Option
+      </Checkbox>
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyCheckbox />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyCheckbox className={`my-checkbox-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyCheckbox className={`my-checkbox-var-1 my-checkbox-var-2`} />
+    </div>
+  </div>
+);
+```
+
+```postcss attached
+@import '@rescui/checkbox/lib/public-api.p.css';
+
+.my-checkbox-var-1 {
+  @mixin rs-checkbox-size-l;
+  @mixin rs-checkbox-mode-rock;
+}
+.my-checkbox-var-2 {
+  @mixin rs-checkbox-size-s;
+  @mixin rs-checkbox-mode-classic;
+}
+```
+
+#### `CheckboxControl` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-checkbox-control-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-checkbox-control-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-checkbox-control-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-checkbox-control-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-checkbox-control-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+
+##### Demo
+
+Instead of separate classes, it may be a single class with `@media` queries inside:
+
+```tsx
+import { CheckboxControl } from '@rescui/checkbox';
+
+const MyCheckboxControl = ({ className }) => {
+  return (
+    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
+      <CheckboxControl className={className} defaultChecked />
+    </div>
+  );
+};
+
+render(
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div>
+      <p>Default:</p>
+      <MyCheckboxControl />
+    </div>
+    <div>
+      <p>Var1:</p>
+      <MyCheckboxControl className={`my-checkbox-control-var-1`} />
+    </div>
+    <div>
+      <p>Var1 & Var2 combined:</p>
+      <MyCheckboxControl
+        className={`my-checkbox-control-var-1 my-checkbox-control-var-2`}
+      />
+    </div>
+  </div>
+);
+```
+
+```postcss
+@import '@rescui/checkbox/lib/public-api.p.css';
+
+.my-checkbox-control-var-1 {
+  @mixin rs-checkbox-control-size-l;
+  @mixin rs-checkbox-control-mode-rock;
+}
+.my-checkbox-control-var-2 {
+  @mixin rs-checkbox-control-size-s;
+  @mixin rs-checkbox-control-mode-classic;
+}
+```

package/llm/index.md

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