shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,124 +0,0 @@
-# Format Number
-
-[component-header:sl-format-number]
-
-Formats a number using the specified locale and options.
-
-Localization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). No language packs are required.
-
-```html preview
-<div class="format-number-overview">
-  <sl-format-number value="1000"></sl-format-number> 
-  <br><br>
-  <sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>  
-</div>
-
-<script>
-  const container = document.querySelector('.format-number-overview');
-  const formatter = container.querySelector('sl-format-number');
-  const input = container.querySelector('sl-input');
-
-  input.addEventListener('sl-input', () => formatter.value = input.value || 0);
-</script>
-```
-
-```jsx react
-import { useState } from 'react';
-import { SlFormatNumber, SlInput } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => {
-  const [value, setValue] = useState(1000);
-
-  return (
-    <>
-      <SlFormatNumber value={value} />
-      <br /><br />
-      <SlInput 
-        type="number" 
-        value={value} 
-        label="Number to Format" 
-        style={{ maxWidth: '180px' }}
-        onSlInput={event => setValue(event.target.value)}
-      />
-    </>
-  );
-};
-```
-
-## Examples
-
-### Percentages
-
-To get the value as a percent, set the `type` attribute to `percent`.
-
-```html preview
-<sl-format-number type="percent" value="0"></sl-format-number><br>
-<sl-format-number type="percent" value="0.25"></sl-format-number><br>
-<sl-format-number type="percent" value="0.50"></sl-format-number><br>
-<sl-format-number type="percent" value="0.75"></sl-format-number><br>
-<sl-format-number type="percent" value="1"></sl-format-number>
-```
-
-```jsx react
-import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlFormatNumber type="percent" value={0} /><br />
-    <SlFormatNumber type="percent" value={0.25} /><br />
-    <SlFormatNumber type="percent" value={0.50} /><br />
-    <SlFormatNumber type="percent" value={0.75} /><br />
-    <SlFormatNumber type="percent" value={1} />  
-  </>
-);
-```
-
-### Localization
-
-Use the `lang` attribute to set the number formatting locale.
-
-```html preview
-English: <sl-format-number value="2000" lang="en" minimum-fraction-digits="2"></sl-format-number><br>
-German: <sl-format-number value="2000" lang="de" minimum-fraction-digits="2"></sl-format-number><br>
-Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></sl-format-number>
-```
-
-```jsx react
-import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" /><br />
-    German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" /><br />
-    Russian: <SlFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
-  </>
-);
-```
-
-### Currency
-
-To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `lang` to ensure the the number is formatted correctly for the target locale.
-
-```html preview
-<sl-format-number type="currency" currency="USD" value="2000" lang="en-US"></sl-format-number><br>
-<sl-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></sl-format-number><br>
-<sl-format-number type="currency" currency="EUR" value="2000" lang="de"></sl-format-number><br>
-<sl-format-number type="currency" currency="RUB" value="2000" lang="ru"></sl-format-number><br>
-<sl-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></sl-format-number>
-```
-
-```jsx react
-import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlFormatNumber type="currency" currency="USD" value="2000" lang="en-US" /><br />
-    <SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" /><br />
-    <SlFormatNumber type="currency" currency="EUR" value="2000" lang="de" /><br />
-    <SlFormatNumber type="currency" currency="RUB" value="2000" lang="ru" /><br />
-    <SlFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
-  </>
-);
-```
-
-[component-metadata:sl-format-number]

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

@@ -1,160 +0,0 @@
-# Icon Button
-
-[component-header:sl-icon-button]
-
-Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
-
-For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
-
-```html preview
-<sl-icon-button name="gear" label="Settings"></sl-icon-button>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlIconButton name="gear" label="Settings" />
-);
-```
-
-## Examples
-
-### Sizes
-
-Icon buttons inherit their parent element's `font-size`.
-
-```html preview
-<sl-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></sl-icon-button>
-<sl-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></sl-icon-button>
-<sl-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></sl-icon-button>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <>
-    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
-    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
-    <SlIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
-  </>
-);
-```
-
-### Colors
-
-Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.
-
-```html preview
-<div class="icon-button-color">
-  <sl-icon-button name="type-bold" label="Bold"></sl-icon-button>
-  <sl-icon-button name="type-italic" label="Italic"></sl-icon-button>
-  <sl-icon-button name="type-underline" label="Underline"></sl-icon-button>
-</div>
-
-<style>
-  .icon-button-color sl-icon-button::part(base) {
-    color: #b00091;
-  }
-
-  .icon-button-color sl-icon-button::part(base):hover,
-  .icon-button-color sl-icon-button::part(base):focus {
-    color: #c913aa;
-  }
-
-  .icon-button-color sl-icon-button::part(base):active {
-    color: #960077;
-  }
-</style>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const css = `
-  .icon-button-color sl-icon-button::part(base) {
-    color: #b00091;
-  }
-
-  .icon-button-color sl-icon-button::part(base):hover,
-  .icon-button-color sl-icon-button::part(base):focus {
-    color: #c913aa;
-  }
-
-  .icon-button-color sl-icon-button::part(base):active {
-    color: #960077;
-  }
-`;
-
-const App = () => (
-  <>
-    <div className="icon-button-color">
-      <SlIconButton name="type-bold" label="Bold" />
-      <SlIconButton name="type-italic" label="Italic" />
-      <SlIconButton name="type-underline" label="Underline" />
-    </div>
-
-    <style>{css}</style>
-  </>
-);
-```
-
-### Link Buttons
-
-Use the `href` attribute to convert the button to a link.
-
-```html preview
-<sl-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></sl-icon-button>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlIconButton 
-    name="gear" 
-    label="Settings" 
-    href="https://example.com" 
-    target="_blank"
-  />
-);
-```
-
-### Icon Button with Tooltip
-
-Wrap a tooltip around an icon button to provide contextual information to the user.
-
-```html preview
-<sl-tooltip content="Settings">
-  <sl-icon-button name="gear" label="Settings"></sl-icon-button>
-</sl-tooltip>
-```
-
-```jsx react
-import { SlIconButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlTooltip content="Settings">
-    <SlIconButton name="gear" label="Settings" />
-  </SlTooltip>
-);
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable the icon button.
-
-```html preview
-<sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
-```
-
-```jsx react
-import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlIconButton name="gear" label="Settings" disabled />
-);
-```
-
-[component-metadata:sl-icon-button]