shoelace-rails-ui 0.1.0

data/remote-src/2.0.0.beta64/shoelace-next/docs/components/qr-code.md

@@ -0,0 +1,167 @@
+# QR Code
+
+[component-header:sl-qr-code]
+
+Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+
+QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc.
+
+```html preview
+<div class="qr-overview">
+  <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code>
+  <br>
+
+  <sl-input maxlength="255" clearable></sl-input>
+</div>
+
+<script>
+  const container = document.querySelector('.qr-overview');
+  const qrCode = container.querySelector('sl-qr-code');
+  const input = container.querySelector('sl-input');
+
+  input.value = qrCode.value;
+  input.addEventListener('sl-input', () => qrCode.value = input.value);
+</script>
+
+<style>
+  .qr-overview {
+    max-width: 256px;
+  }
+
+  .qr-overview sl-input {
+    margin-top: 1rem;
+  }
+</style>
+```
+
+```jsx react
+import { useState } from 'react';
+import { SlQrCode, SlInput } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .qr-overview {
+    max-width: 256px;
+  }
+
+  .qr-overview sl-input {
+    margin-top: 1rem;
+  }
+`;
+
+const App = () => {
+  const [value, setValue] = useState('https://shoelace.style/');
+
+  return (
+    <>
+      <div className="qr-overview">
+        <SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
+        <br />
+
+        <SlInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
+## Examples
+
+### Colors
+
+Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
+
+```html preview
+<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
+```
+
+```jsx react
+import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />
+);
+```
+
+### Size
+
+Use the `size` attribute to change the size of the QR code.
+
+```html preview
+<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
+```
+
+```jsx react
+import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlQrCode value="https://shoelace.style/" size="64" />
+);
+```
+
+### Radius
+
+Create a rounded effect with the `radius` attribute.
+
+```html preview
+<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>
+```
+
+```jsx react
+import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlQrCode value="https://shoelace.style/" radius="0.5" />
+);
+```
+
+### Error Correction
+
+QR codes can be rendered with various levels of [error correction](https://www.qrcode.com/en/about/error_correction.html) that can be set using the `error-correction` attribute. This example generates four codes with the same value using different error correction levels.
+
+```html preview
+<div class="qr-error-correction">
+  <sl-qr-code value="https://shoelace.style/" error-correction="L"></sl-qr-code>
+  <sl-qr-code value="https://shoelace.style/" error-correction="M"></sl-qr-code>
+  <sl-qr-code value="https://shoelace.style/" error-correction="Q"></sl-qr-code>
+  <sl-qr-code value="https://shoelace.style/" error-correction="H"></sl-qr-code>
+</div>
+
+<style>
+  .qr-error-correction {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+</style>
+```
+
+```jsx react
+import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
+
+const css = `
+  .qr-error-correction {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+`;
+
+const App = () => {
+  return (
+    <>
+      <div className="qr-error-correction">
+        <SlQrCode value="https://shoelace.style/" error-correction="L" />
+        <SlQrCode value="https://shoelace.style/" error-correction="M" />
+        <SlQrCode value="https://shoelace.style/" error-correction="Q" />
+        <SlQrCode value="https://shoelace.style/" error-correction="H" />
+      </div>
+
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
+[component-metadata:sl-qr-code]

data/remote-src/2.0.0.beta64/shoelace-next/docs/components/radio-group.md

@@ -0,0 +1,52 @@
+# Radio Group
+
+[component-header:sl-radio-group]
+
+Radio Groups are used to group multiple radios so they function as a single control.
+
+```html preview
+<sl-radio-group label="Select an option">
+  <sl-radio value="1" checked>Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+```
+
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRadioGroup label="Select an option">
+    <SlRadio value="1" checked>Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+```
+
+## Examples
+
+### Showing the Fieldset
+
+You can show a fieldset and legend that wraps the radio group using the `fieldset` attribute.
+
+```html preview
+<sl-radio-group label="Select an option" fieldset>
+  <sl-radio value="1" checked>Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+```
+
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRadioGroup label="Select an option" fieldset>
+    <SlRadio value="1" checked>Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+```
+[component-metadata:sl-radio-group]

data/remote-src/2.0.0.beta64/shoelace-next/docs/components/radio.md

@@ -0,0 +1,59 @@
+# Radio
+
+[component-header:sl-radio]
+
+Radios allow the user to select one option from a group of many.
+
+Radios are designed to be used with [radio groups](/components/radio-group). As such, all of the examples on this page utilize them to demonstrate their correct usage.
+
+```html preview
+<sl-radio-group label="Select an option">
+  <sl-radio value="1" checked>Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+</sl-radio-group>
+```
+
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRadioGroup label="Select an option">
+    <SlRadio value="1" checked>Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+  </SlRadioGroup>
+);
+```
+
+?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
+
+## Examples
+
+### Disabled
+
+Use the `disabled` attribute to disable a radio.
+
+```html preview
+<sl-radio-group label="Select an option">
+  <sl-radio value="1" checked>Option 1</sl-radio>
+  <sl-radio value="2">Option 2</sl-radio>
+  <sl-radio value="3">Option 3</sl-radio>
+  <sl-radio value="4" disabled>Disabled</sl-radio>
+</sl-radio-group>
+```
+
+```jsx react
+import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRadioGroup label="Select an option">
+    <SlRadio value="1" checked>Option 1</SlRadio>
+    <SlRadio value="2">Option 2</SlRadio>
+    <SlRadio value="3">Option 3</SlRadio>
+    <SlRadio value="4" disabled>Disabled</SlRadio>
+  </SlRadioGroup>
+);
+```
+
+[component-metadata:sl-radio]

data/remote-src/2.0.0.beta64/shoelace-next/docs/components/range.md

@@ -0,0 +1,180 @@
+# Range
+
+[component-header:sl-range]
+
+Ranges allow the user to select a single value within a given range using a slider.
+
+```html preview
+<sl-range></sl-range>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange />
+);
+```
+
+?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
+
+## Examples
+
+### Min, Max, and Step
+
+Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
+
+```html preview
+<sl-range min="0" max="10" step="1"></sl-range>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange min={0} max={10} step={1} />
+);
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable a slider.
+
+```html preview
+<sl-range disabled></sl-range>
+```
+
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange disabled />
+);
+```
+
+### Tooltip Placement
+
+By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
+
+```html preview
+<sl-range tooltip="bottom"></sl-range>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange tooltip="bottom" />
+);
+```
+
+### Disable the Tooltip
+
+To disable the tooltip, set `tooltip` to `none`.
+
+```html preview
+<sl-range tooltip="none"></sl-range>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange tooltip="none" />
+);
+```
+
+### Custom Track Colors
+
+You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
+
+```html preview
+<sl-range style="
+  --track-color-active: var(--sl-color-primary-600);
+  --track-color-inactive: var(--sl-color-primary-100);
+"></sl-range>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange 
+    style={{
+      '--track-color-active': 'var(--sl-color-primary-600)',
+      '--track-color-inactive': 'var(--sl-color-primary-200)'
+    }}
+  />
+);
+```
+
+### Custom Tooltip Formatter
+
+You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
+
+```html preview
+<sl-range min="0" max="100" step="1" class="range-with-custom-formatter"></sl-range>
+
+<script>
+  const range = document.querySelector('.range-with-custom-formatter');
+  range.tooltipFormatter = value => `Total - ${value}%`;
+</script>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange 
+    min={0}
+    max={100}
+    step={1}
+    tooltipFormatter={value => `Total - ${value}%`}
+  />
+);
+```
+
+### Labels
+
+Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
+
+```html preview
+<sl-range label="Volume" min="0" max="100"></sl-input>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange label="Volume" min={0} max={100} />
+);
+```
+
+### Help Text
+
+Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
+
+```html preview
+<sl-range 
+  label="Volume" 
+  help-text="Controls the volume of the current song."
+  min="0"
+  max="100"
+></sl-input>
+```
+
+```jsx react
+import { SlRange } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRange 
+    label="Volume" 
+    help-text="Controls the volume of the current song."
+    min={0}
+    max={100}
+  />
+);
+```
+
+[component-metadata:sl-range]

data/remote-src/2.0.0.beta64/shoelace-next/docs/components/rating.md

@@ -0,0 +1,153 @@
+# Rating
+
+[component-header:sl-rating]
+
+Ratings give users a way to quickly view and provide feedback.
+
+```html preview
+<sl-rating></sl-rating>
+```
+
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating />
+);
+```
+
+## Examples
+
+### Maximum Value
+
+Ratings are 0-5 by default. To change the maximum possible value, use the `max` attribute.
+
+```html preview
+<sl-rating max="3"></sl-rating>
+```
+
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating max={3} />
+);
+```
+
+### Precision
+
+Use the `precision` attribute to let users select fractional ratings.
+
+```html preview
+<sl-rating precision="0.5" value="2.5"></sl-rating>
+```
+
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating precision={0.5} value={2.5} />
+);
+```
+
+## Symbol Sizes
+
+Set the `--symbol-size` custom property to adjust the size.
+
+```html preview
+<sl-rating style="--symbol-size: 2rem;"></sl-rating>
+```
+
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating style={{ '--symbol-size': '2rem' }} />
+);
+```
+
+### Readonly
+
+Use the `readonly` attribute to display a rating that users can't change.
+
+```html preview
+<sl-rating readonly value="3"></sl-rating>
+```
+
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating readonly value={3} />
+);
+```
+
+### Disabled
+
+Use the `disable` attribute to disable the rating.
+
+```html preview
+<sl-rating disabled value="3"></sl-rating>
+```
+
+```jsx react
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating disabled value={3} />
+);
+```
+
+### Custom Icons
+
+```html preview
+<sl-rating class="rating-hearts" style="--symbol-color-active: #ff4136;"></sl-rating>
+
+<script>
+  const rating = document.querySelector('.rating-hearts');
+  rating.getSymbol = () => '<sl-icon name="heart-fill"></sl-icon>'; 
+</script>
+```
+
+```jsx react
+import '@shoelace-style/shoelace/dist/components/icon/icon';
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlRating 
+    getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'}
+    style={{ '--symbol-color-active': '#ff4136' }} 
+  />
+);
+```
+
+### Value-based Icons
+
+```html preview
+<sl-rating class="rating-emojis"></sl-rating>
+
+<script>
+  const rating = document.querySelector('.rating-emojis');
+
+  rating.getSymbol = (value) => {
+    const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
+    return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
+  };
+</script>
+```
+
+```jsx react
+import '@shoelace-style/shoelace/dist/components/icon/icon';
+import { SlRating } from '@shoelace-style/shoelace/dist/react';
+
+function getSymbol(value) {
+  const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
+  return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
+}
+
+const App = () => (
+  <SlRating getSymbol={getSymbol} />
+);
+```
+
+[component-metadata:sl-rating]