shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,167 +0,0 @@
-# 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

@@ -1,52 +0,0 @@
-# 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

@@ -1,59 +0,0 @@
-# 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

@@ -1,180 +0,0 @@
-# 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

@@ -1,153 +0,0 @@
-# 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]