shoelace-rails-ui 0.1.0

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

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

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