diff --git a/apps/docs/content/docs/components/actions/button/index.mdx b/apps/docs/content/docs/components/actions/button/index.mdx index 05cfe255..68d1157d 100644 --- a/apps/docs/content/docs/components/actions/button/index.mdx +++ b/apps/docs/content/docs/components/actions/button/index.mdx @@ -6,22 +6,14 @@ description: A labelled control for actions in an interface. `Button` triggers an action, such as saving a form, opening a dialog, or deleting an item. Use [`Link`](/components/actions/link) when the interaction takes someone to another URL or route. - + ## Size `medium` is the default size. Use `small` in dense toolbars, tables, and other compact interfaces. Keep related controls at the same size. - + ## Appearance @@ -29,11 +21,7 @@ Use `appearance` to set a button's visual weight. `solid` is the default. Choose for secondary actions that should recede beside the main action. Appearance sets emphasis. Use `tone` to communicate intent. - + ## Tone @@ -41,11 +29,7 @@ Use `tone` to communicate intent. `neutral` is the default, `accent` identifies and `danger` marks a destructive one. Tone and appearance are independent, so every combination is available. - + ## Block layout @@ -62,11 +46,7 @@ Use `startIcon` or `endIcon` with a visible label. `Button` sizes nested icons f needs no `size` prop. Pass one only to override it. Use [`IconButton`](/components/actions/icon-button) only when the icon is familiar without a text label. - + ## Pending @@ -74,22 +54,14 @@ Set `isPending` while an action runs. The button remains focusable, ignores furt overlays its label with a spinner. Update the visible label when the status matters, for example from “Save” to “Saving”. - + ## Disabled Set `isDisabled` only when the action is unavailable. Disabled buttons cannot receive focus or respond to presses. - + ## Accessibility diff --git a/apps/docs/content/docs/components/actions/icon-button/index.mdx b/apps/docs/content/docs/components/actions/icon-button/index.mdx index e1ecb9b9..4a929591 100644 --- a/apps/docs/content/docs/components/actions/icon-button/index.mdx +++ b/apps/docs/content/docs/components/actions/icon-button/index.mdx @@ -6,66 +6,42 @@ description: A compact icon-only control for an action. `IconButton` triggers a familiar compact action, such as closing a panel, deleting a row, or adding an item. Give every icon button an accessible name because it has no visible label. - + ## Size `medium` is the default. Use `small` for compact toolbars and dense row actions. Keep controls in a group at the same size. - + ## Appearance `IconButton` uses the same `appearance` options as [`Button`](/components/actions/button). `solid` is the default. Choose `subtle` or `ghost` when a secondary control needs less emphasis. - + ## Tone Use `tone` to communicate intent. `neutral` is the default, `accent` identifies a primary action, and `danger` marks a destructive one. - + ## Pending Set `isPending` while an action runs. The control remains focusable, ignores further presses, and replaces its icon with a busy cue. - + ## Disabled Set `isDisabled` when the action is unavailable. Disabled controls cannot receive focus or respond to presses. - + ## Accessibility diff --git a/apps/docs/content/docs/components/actions/link/index.mdx b/apps/docs/content/docs/components/actions/link/index.mdx index 77aab0ae..75a55591 100644 --- a/apps/docs/content/docs/components/actions/link/index.mdx +++ b/apps/docs/content/docs/components/actions/link/index.mdx @@ -6,18 +6,14 @@ description: A styled link for inline and standalone navigation. `Link` navigates to another URL or route. Use [`Button`](/components/actions/button) for an action such as saving, submitting, or opening a dialog. - + ## Tone `accent` is the default tone. Use `neutral` for supporting links that should not compete with the main content. - + ## Inline and standalone @@ -27,22 +23,14 @@ recognisable in running text. Set `isStandalone` for a link outside prose, such as a card link or navigation item. It shows its underline on hover or press and has a 24 × 24 CSS-pixel structural target. - + ## Disabled Set `isDisabled` only when a destination is temporarily unavailable. Disabled links cannot receive focus or respond to activation. Explain why nearby when someone needs that information. - + ## Accessibility diff --git a/apps/docs/content/docs/components/feedback/loading-skeleton/index.mdx b/apps/docs/content/docs/components/feedback/loading-skeleton/index.mdx index dcf180a0..bfdee044 100644 --- a/apps/docs/content/docs/components/feedback/loading-skeleton/index.mdx +++ b/apps/docs/content/docs/components/feedback/loading-skeleton/index.mdx @@ -6,11 +6,7 @@ description: Replaces content with a placeholder that keeps its shape while it l Use `LoadingSkeleton` when content is loading but its layout is known. Wrap the content that will appear so the placeholder occupies the same space. - + Wrap text itself, rather than its parent, when it can span several lines. The placeholder then follows each line without changing the layout. @@ -23,18 +19,13 @@ and other content with a fixed shape. Set `radius` when the direct child has square corners but a visible descendant has rounded corners. This is useful when a `TextField` is the child because its input control has rounded corners inside the field wrapper. - + ## Loading state @@ -50,22 +41,14 @@ returns its children without a wrapper. Use `LoadingSkeletonProvider` when one loading state controls a section. Its value overrides `isLoading` on every descendant skeleton, so a section changes together. - + ## Element type `LoadingSkeleton` renders a `span` by default. Set `elementType` when the parent requires another element, such as an `li` inside a list. - + ## Accessibility diff --git a/apps/docs/content/docs/components/feedback/loading-spinner/index.mdx b/apps/docs/content/docs/components/feedback/loading-spinner/index.mdx index 622acb63..55aedb26 100644 --- a/apps/docs/content/docs/components/feedback/loading-spinner/index.mdx +++ b/apps/docs/content/docs/components/feedback/loading-spinner/index.mdx @@ -6,21 +6,13 @@ description: Animated indicator for work that is still in progress. `LoadingSpinner` shows that work is in progress. Use it on its own for a small loading region. Wrap final content to replace it in place. - + ## Size `medium` is the default. Set `size` to match the surrounding control or content. - + ## With content @@ -28,22 +20,14 @@ Pass final content with `isLoading` to replace it in place. While loading, the s content's dimensions and disables interactive descendants. Set `isLoading` to `false` to reveal the content. - + ## Colour Omit `color` to inherit the surrounding text colour. Set it only when the spinner needs to match nearby semantic content. - + ## Accessibility @@ -57,8 +41,4 @@ wrapped children from assistive technology and blocks focus and activation. For a labelled button that keeps its text visible, wrap the icon in `LoadingSpinner`. Disable the button while the action runs. - + diff --git a/apps/docs/content/docs/components/forms/checkbox/index.mdx b/apps/docs/content/docs/components/forms/checkbox/index.mdx index b506fe3a..dc9048df 100644 --- a/apps/docs/content/docs/components/forms/checkbox/index.mdx +++ b/apps/docs/content/docs/components/forms/checkbox/index.mdx @@ -7,11 +7,7 @@ description: Use `Checkbox` when someone can choose an option independently of nearby controls. Pass `description` to clarify what the option means. - + ## States @@ -19,32 +15,20 @@ Use `defaultSelected` for an uncontrolled initial value, or pair `isSelected` wi application state owns the selection. `isIndeterminate` communicates a mixed state, such as a parent option whose child options are only partly selected. - + Disabled checkboxes cannot receive focus, and their value cannot change. Read-only checkboxes remain focusable, so someone who uses a keyboard or assistive technology can still perceive their state. Keyboard navigation shows a focus ring. Pointer focus does not. - + ## Size Use `size` to change the checkbox control. It does not change the label typography. `medium` is the default. Use `small` in compact layouts and `large` where a larger control improves scanning. - + ## Validation @@ -52,11 +36,7 @@ Pass `errorMessage` with `isInvalid` when the choice blocks submission. Always p field with no message leaves someone who cannot see the border colour with no way to know what is wrong. - + Read [Validation](/components/forms/validation) for how to word the message. @@ -66,11 +46,7 @@ Wrap a checkbox in block `Text` when its label needs a specific text size. The c inherited line height. It keeps its fixed visual square centred on the first line when the label wraps. Outside `Text`, it uses the normal compact control size. - + ## Primitive diff --git a/apps/docs/content/docs/components/forms/checkbox/props.mdx b/apps/docs/content/docs/components/forms/checkbox/props.mdx index 6bcd445d..c361a413 100644 --- a/apps/docs/content/docs/components/forms/checkbox/props.mdx +++ b/apps/docs/content/docs/components/forms/checkbox/props.mdx @@ -1,6 +1,7 @@ --- title: Checkbox -description: API reference for the composed labelled checkbox. +description: + Lets someone select an independent option, with optional supporting and validation text. --- ## Props diff --git a/apps/docs/content/docs/components/forms/combobox-field/index.mdx b/apps/docs/content/docs/components/forms/combobox-field/index.mdx index 9269a4f3..adb9c5cb 100644 --- a/apps/docs/content/docs/components/forms/combobox-field/index.mdx +++ b/apps/docs/content/docs/components/forms/combobox-field/index.mdx @@ -6,11 +6,7 @@ description: Searchable single-select field with label, validation, and option l Use `ComboboxField` when someone needs to search for or choose one option from a list. It combines an input, label, description, validation message, popover, and listbox. - + ## Items and selection @@ -36,22 +32,14 @@ fields. Set `isRequired` to make a selection mandatory. Use `necessityIndicator` to choose how it appears beside the label. - + ## Validation Pass `errorMessage` with `isInvalid` to report a problem. Always pass both. An invalid field with no message leaves someone who cannot see the border colour with no way to know what is wrong. - + Read [Validation](/components/forms/validation) for server validation and for how to word the message. @@ -60,11 +48,7 @@ message. Use `ComboboxSection` to group related static options. - + ## Async results diff --git a/apps/docs/content/docs/components/forms/text-field/index.mdx b/apps/docs/content/docs/components/forms/text-field/index.mdx index 72288242..c30ec6ff 100644 --- a/apps/docs/content/docs/components/forms/text-field/index.mdx +++ b/apps/docs/content/docs/components/forms/text-field/index.mdx @@ -7,11 +7,7 @@ description: Use `TextField` to collect a single line of text. It combines an input with a label, description, and validation message. - + ## Labels and placeholders @@ -31,22 +27,14 @@ instead. Set `isRequired` for required fields. `necessityIndicator="icon"` adds a visual marker. `necessityIndicator="label"` appends “(required)” to the label. - + ## Validation Pass `errorMessage` with `isInvalid` to report a problem. Always pass both. An invalid field with no message leaves someone who cannot see the border colour with no way to know what is wrong. - + Read [Validation](/components/forms/validation) for server validation and for how to word the message. @@ -57,22 +45,14 @@ Use `prefix` and `suffix` for content inside the input, such as a search icon, c scheme. Both accept any `ReactNode`. Give an interactive prefix or suffix an accessible name and keyboard behaviour. - + ## Size Use `size` to set the input height and typography. Use `small` in compact layouts. `medium` is the default. The HTML numeric `size` attribute is unavailable because `size` is the Luke UI variant. - + ## Primitive diff --git a/apps/docs/content/docs/components/forms/validation.mdx b/apps/docs/content/docs/components/forms/validation.mdx index 09982a4a..83b4212a 100644 --- a/apps/docs/content/docs/components/forms/validation.mdx +++ b/apps/docs/content/docs/components/forms/validation.mdx @@ -6,11 +6,7 @@ description: Validate a form field, and write the message that tells someone how Every Luke UI form field can report a problem. An invalid field takes the danger border colour and renders a message beneath the control. - + ## Let the browser validate @@ -21,11 +17,7 @@ Pass `type="email"` or `type="url"` to check the value's format. Leave out `errorMessage`. The field then shows the browser's own message. The browser checks the value on blur and on submit. - + Pass `validationBehavior="native"` to block submission until every field passes. This is the default. diff --git a/apps/docs/content/docs/components/layout/box/index.mdx b/apps/docs/content/docs/components/layout/box/index.mdx index 2ac0d1c9..c8c0bce3 100644 --- a/apps/docs/content/docs/components/layout/box/index.mdx +++ b/apps/docs/content/docs/components/layout/box/index.mdx @@ -7,11 +7,7 @@ description: A div with responsive Luke UI layout properties. token spacing, constrains an element's size, or controls a flex or grid child. Use a normal `div` when no supported layout property applies. - + ## Layout properties @@ -33,11 +29,7 @@ to the writing direction without left and right variants. Pass a direct value when it does not change. Use an object keyed by breakpoint when it does. Values cascade upward from `xsmall`, so only specify the changes. - + ```tsx + ## Composition diff --git a/apps/docs/content/docs/components/primitives/checkbox/index.mdx b/apps/docs/content/docs/components/primitives/checkbox/index.mdx index e2e2cb95..da1488eb 100644 --- a/apps/docs/content/docs/components/primitives/checkbox/index.mdx +++ b/apps/docs/content/docs/components/primitives/checkbox/index.mdx @@ -6,11 +6,7 @@ description: Lower-level checkbox anatomy for custom composed form controls. Use the Checkbox primitive when a composed control needs a custom label layout or extra content. For normal application forms, use [`Checkbox`](/components/forms/checkbox). - + ## Anatomy diff --git a/apps/docs/content/docs/components/primitives/combobox/index.mdx b/apps/docs/content/docs/components/primitives/combobox/index.mdx index c3e876ab..07f7666a 100644 --- a/apps/docs/content/docs/components/primitives/combobox/index.mdx +++ b/apps/docs/content/docs/components/primitives/combobox/index.mdx @@ -7,11 +7,7 @@ Use these primitives when [`ComboboxField`](/components/forms/combobox-field) do layout or loading UI. They expose the control, popover, listbox, and option parts used by the composed field. Application code should usually use `ComboboxField`. - + ## Anatomy diff --git a/apps/docs/content/docs/components/primitives/field/index.mdx b/apps/docs/content/docs/components/primitives/field/index.mdx index 924f5ede..c8305d1f 100644 --- a/apps/docs/content/docs/components/primitives/field/index.mdx +++ b/apps/docs/content/docs/components/primitives/field/index.mdx @@ -7,11 +7,7 @@ Use the field primitives to build a custom field with Luke UI labels, descriptio messages. Application code should usually use a composed field such as [`TextField`](/components/forms/text-field) or [`ComboboxField`](/components/forms/combobox-field). - + ## Anatomy diff --git a/apps/docs/content/docs/components/primitives/input-group/index.mdx b/apps/docs/content/docs/components/primitives/input-group/index.mdx index 92956df6..34b347fd 100644 --- a/apps/docs/content/docs/components/primitives/input-group/index.mdx +++ b/apps/docs/content/docs/components/primitives/input-group/index.mdx @@ -7,11 +7,7 @@ Use these primitives to build a custom text control. Reach for them when you nee without label, description, or error slots. For most application forms, use [`TextField`](/components/forms/text-field). - + ## Anatomy diff --git a/apps/docs/content/docs/components/primitives/visually-hidden/index.mdx b/apps/docs/content/docs/components/primitives/visually-hidden/index.mdx index 1929a790..8cc60d76 100644 --- a/apps/docs/content/docs/components/primitives/visually-hidden/index.mdx +++ b/apps/docs/content/docs/components/primitives/visually-hidden/index.mdx @@ -12,11 +12,7 @@ Reach for it when the interface conveys meaning visually but needs a text equiva include a label behind an icon-only control, extra context for a link, and a status message inside a live region. - + ## Render a different element diff --git a/apps/docs/content/docs/components/primitives/visually-hidden/props.mdx b/apps/docs/content/docs/components/primitives/visually-hidden/props.mdx index 06b3fd77..371504f4 100644 --- a/apps/docs/content/docs/components/primitives/visually-hidden/props.mdx +++ b/apps/docs/content/docs/components/primitives/visually-hidden/props.mdx @@ -1,6 +1,6 @@ --- title: Visually Hidden -description: Hide content visually while keeping it available to assistive technology. +description: Hide content visually and keep it available to assistive technology. --- ## Props diff --git a/apps/docs/content/docs/components/typography/blockquote/index.mdx b/apps/docs/content/docs/components/typography/blockquote/index.mdx index c29d2e20..afd2645a 100644 --- a/apps/docs/content/docs/components/typography/blockquote/index.mdx +++ b/apps/docs/content/docs/components/typography/blockquote/index.mdx @@ -6,34 +6,18 @@ description: Block-level quotation from another source. `Blockquote` quotes another source as a block. It renders a native `blockquote` element, which conveys quotation semantics to assistive technology. - + ## Typography `Blockquote` accepts the `size`, `fontWeight`, and `lineClamp` props from [Text](/components/typography/text). - - - - - + + + + + ## Related components diff --git a/apps/docs/content/docs/components/typography/blockquote/props.mdx b/apps/docs/content/docs/components/typography/blockquote/props.mdx index 6b1081a5..f90dfb1f 100644 --- a/apps/docs/content/docs/components/typography/blockquote/props.mdx +++ b/apps/docs/content/docs/components/typography/blockquote/props.mdx @@ -1,6 +1,6 @@ --- title: Blockquote -description: Blockquote component. +description: Block-level quotation from another source. --- ## Props diff --git a/apps/docs/content/docs/components/typography/code/index.mdx b/apps/docs/content/docs/components/typography/code/index.mdx index e6531c0b..6f69f503 100644 --- a/apps/docs/content/docs/components/typography/code/index.mdx +++ b/apps/docs/content/docs/components/typography/code/index.mdx @@ -6,15 +6,11 @@ description: Marks text to signify a short fragment of computer code. `Code` marks a short fragment of computer code. It renders a native `code` element, which conveys code semantics to assistive technology. - + ## In context `Code` is inline, so it inherits the surrounding typography and sits in a sentence without breaking the line. - + diff --git a/apps/docs/content/docs/components/typography/code/props.mdx b/apps/docs/content/docs/components/typography/code/props.mdx index b5d9bf65..66927a4a 100644 --- a/apps/docs/content/docs/components/typography/code/props.mdx +++ b/apps/docs/content/docs/components/typography/code/props.mdx @@ -1,6 +1,6 @@ --- title: Code -description: Code component. +description: Marks text to signify a short fragment of computer code. --- ## Props diff --git a/apps/docs/content/docs/components/typography/em/index.mdx b/apps/docs/content/docs/components/typography/em/index.mdx index abf30791..af63c9e6 100644 --- a/apps/docs/content/docs/components/typography/em/index.mdx +++ b/apps/docs/content/docs/components/typography/em/index.mdx @@ -6,7 +6,7 @@ description: Marks text to stress emphasis. `Em` stresses a word or phrase, changing how the sentence reads. It renders a native `em` element, which conveys emphasis to assistive technology, and applies italic styling. - + `Em` stays inline and inherits the surrounding typography. Use `textWrap` to control wrapping. Use `lineClamp` to constrain longer text. diff --git a/apps/docs/content/docs/components/typography/em/props.mdx b/apps/docs/content/docs/components/typography/em/props.mdx index 6495d228..2c7bee43 100644 --- a/apps/docs/content/docs/components/typography/em/props.mdx +++ b/apps/docs/content/docs/components/typography/em/props.mdx @@ -1,6 +1,6 @@ --- title: Em -description: Em component. +description: Marks text to stress emphasis. --- ## Props diff --git a/apps/docs/content/docs/components/typography/emoji/index.mdx b/apps/docs/content/docs/components/typography/emoji/index.mdx index f5991ecf..4253371e 100644 --- a/apps/docs/content/docs/components/typography/emoji/index.mdx +++ b/apps/docs/content/docs/components/typography/emoji/index.mdx @@ -6,11 +6,7 @@ description: Emoji rendering with a reliable screen reader label. `Emoji` renders an emoji with a reliable accessible name. It accepts the same typography props as `Text`. - + ## Typography diff --git a/apps/docs/content/docs/components/typography/heading/index.mdx b/apps/docs/content/docs/components/typography/heading/index.mdx index 6a757adc..d79c0c03 100644 --- a/apps/docs/content/docs/components/typography/heading/index.mdx +++ b/apps/docs/content/docs/components/typography/heading/index.mdx @@ -6,22 +6,14 @@ description: Semantic heading with automatic level management. `Heading` renders a semantic section heading. It reads its level from `HeadingLevels` context. Set `level` to override it directly. - + ## Heading level Set `base` on the root `HeadingLevels`. Each nested `HeadingLevels` advances the next heading level. This keeps the document outline aligned with the component structure. - + Use `level` to override the context for one heading. It does not change the level for siblings or children. @@ -40,11 +32,7 @@ By default, `Heading` maps h1 through h6 to size steps `'800'` through `'300'` a level. Use `'900'` for display headings. Set `color` for a semantic text colour, such as `info` for a heading that needs to read as informational. - + ## Related components diff --git a/apps/docs/content/docs/components/typography/kbd/index.mdx b/apps/docs/content/docs/components/typography/kbd/index.mdx index 50038f55..18bbd8b0 100644 --- a/apps/docs/content/docs/components/typography/kbd/index.mdx +++ b/apps/docs/content/docs/components/typography/kbd/index.mdx @@ -7,8 +7,4 @@ description: Represents keyboard input or a hotkey. which conveys keyboard-input semantics to assistive technology, and uses the theme's fixed code font. - + diff --git a/apps/docs/content/docs/components/typography/kbd/props.mdx b/apps/docs/content/docs/components/typography/kbd/props.mdx index 17ad73ae..602001dd 100644 --- a/apps/docs/content/docs/components/typography/kbd/props.mdx +++ b/apps/docs/content/docs/components/typography/kbd/props.mdx @@ -1,6 +1,6 @@ --- title: Kbd -description: Kbd component. +description: Represents keyboard input or a hotkey. --- ## Props diff --git a/apps/docs/content/docs/components/typography/numeral/index.mdx b/apps/docs/content/docs/components/typography/numeral/index.mdx index 8fabb6d8..00e8eae0 100644 --- a/apps/docs/content/docs/components/typography/numeral/index.mdx +++ b/apps/docs/content/docs/components/typography/numeral/index.mdx @@ -6,11 +6,7 @@ description: Locale-aware number formatting powered by Intl.NumberFormat. `Numeral` formats a number with `Intl.NumberFormat`. It reads the active locale from React Aria's `I18nProvider` and accepts the relevant typography props from `Text`. - + ## Format @@ -18,33 +14,21 @@ description: Locale-aware number formatting powered by Intl.NumberFormat. or `unit` is present. Set `format` to `'percent'` or `'decimal'` for those formats. Set it to `'currency'` or `'unit'` when you want that formatting explicit in the component call. - + ## Compact notation Set `abbreviate` for compact notation such as `12K`. Pass `"long"` for a long display such as `12 thousand`. - + ## Precision Pass a number for fixed fraction digits or a `[min, max]` tuple for a range. Use `formatOptions` for other `Intl.NumberFormat` options. - + ## Formatting rules diff --git a/apps/docs/content/docs/components/typography/quote/index.mdx b/apps/docs/content/docs/components/typography/quote/index.mdx index 23a517c8..70e15094 100644 --- a/apps/docs/content/docs/components/typography/quote/index.mdx +++ b/apps/docs/content/docs/components/typography/quote/index.mdx @@ -6,11 +6,7 @@ description: Short inline quotation. `Quote` marks a short quotation inside a sentence. It renders a native `q` element, which conveys quotation semantics to assistive technology and receives the browser's own quotation marks. - + `Quote` stays inline and inherits the surrounding typography. Use `textWrap` to control wrapping. Use `lineClamp` to constrain a longer quotation. Use `cite` to give the source URL. diff --git a/apps/docs/content/docs/components/typography/quote/props.mdx b/apps/docs/content/docs/components/typography/quote/props.mdx index 1daac6d2..eb16dd24 100644 --- a/apps/docs/content/docs/components/typography/quote/props.mdx +++ b/apps/docs/content/docs/components/typography/quote/props.mdx @@ -1,6 +1,6 @@ --- title: Quote -description: Quote component. +description: Short inline quotation. --- ## Props diff --git a/apps/docs/content/docs/components/typography/strong/index.mdx b/apps/docs/content/docs/components/typography/strong/index.mdx index 38529df9..5373ae9f 100644 --- a/apps/docs/content/docs/components/typography/strong/index.mdx +++ b/apps/docs/content/docs/components/typography/strong/index.mdx @@ -6,11 +6,7 @@ description: Marks text to signify strong importance. `Strong` marks text as important. It renders a native `strong` element, which conveys importance to assistive technology, and uses the theme's emphasis font weight. - + `Strong` stays inline and inherits the surrounding typography. Use `textWrap` to control wrapping. Use `lineClamp` to constrain longer text. diff --git a/apps/docs/content/docs/components/typography/strong/props.mdx b/apps/docs/content/docs/components/typography/strong/props.mdx index 5a585112..7851a266 100644 --- a/apps/docs/content/docs/components/typography/strong/props.mdx +++ b/apps/docs/content/docs/components/typography/strong/props.mdx @@ -1,6 +1,6 @@ --- title: Strong -description: Strong component. +description: Marks text to signify strong importance. --- ## Props diff --git a/apps/docs/content/docs/components/typography/text/index.mdx b/apps/docs/content/docs/components/typography/text/index.mdx index 7374c468..d7408627 100644 --- a/apps/docs/content/docs/components/typography/text/index.mdx +++ b/apps/docs/content/docs/components/typography/text/index.mdx @@ -6,11 +6,7 @@ description: Styled text with a coordinated type scale and semantic colour roles `Text` applies Luke UI typography without adding heading semantics. It needs a Luke UI theme root. See [Getting started](/overview/getting-started). - + ## Element type @@ -31,11 +27,7 @@ Use `size` to set font size, line height, letter spacing, and Capsize trim as on `'300'` is the default. Sizes `'200'` through `'400'` work well for running text. Smaller steps suit compact UI labels, while larger steps are useful for display text that is not a semantic heading. - + The active theme supplies the font family and values behind each `fontWeight` role. Use `body` for text, `label` for controls, `heading` for prominent non-heading text, and `emphasis` when text needs @@ -45,22 +37,14 @@ more weight. Set `textAlign` when the layout needs a different inline alignment. - + ## Numeric glyphs Use `fontVariantNumeric` to align numeric columns, format fractions and ordinals, or distinguish zero with a slash. - + ## Trimming @@ -69,33 +53,21 @@ more predictable in cards and other bounded layouts. Inline text skips trim so i cannot interrupt the surrounding line. Set `shouldDisableTrim` explicitly when you need to override the element-type inference. - + ## Truncation Use `lineClamp` to constrain text to one line or up to five lines. `Text` truncates overflow with an ellipsis. It disables trimming automatically when you set `lineClamp`. - + ## Transform and decoration Use `textTransform` and `textDecoration` when the content calls for them. These props affect the rendered text only, so avoid using uppercase styling as a substitute for a clear label. - + ## Related components diff --git a/apps/docs/content/docs/components/visuals/icon/index.mdx b/apps/docs/content/docs/components/visuals/icon/index.mdx index 08a616fb..0b69f19f 100644 --- a/apps/docs/content/docs/components/visuals/icon/index.mdx +++ b/apps/docs/content/docs/components/visuals/icon/index.mdx @@ -8,11 +8,7 @@ description: SVG icon component backed by the generated spritesheet. To find an icon, or to set up the spritesheet, see [Iconography](/overview/iconography). - + ## Use an icon @@ -34,11 +30,7 @@ To find an icon, or to set up the spritesheet, see [Iconography](/overview/icono Use `createIcon` for a one-off icon that is not in the generated spritesheet. It returns a component with the same sizing and accessibility behaviour as `Icon`. - + ## Accessibility @@ -50,11 +42,7 @@ When `title` is omitted, `aria-hidden` defaults to `true`. An icon renders eithe not a meaningful state for an icon. Passing `aria-hidden={false}` therefore has no effect; pass `title` to expose an icon to assistive technology. - + ## Related components diff --git a/apps/docs/content/docs/overview/color.mdx b/apps/docs/content/docs/overview/color.mdx index 6d90b619..da4cc0e9 100644 --- a/apps/docs/content/docs/overview/color.mdx +++ b/apps/docs/content/docs/overview/color.mdx @@ -92,11 +92,7 @@ import { vars } from '@luke-ui/react/theme'; ; ``` - + ### Borders diff --git a/apps/docs/content/docs/overview/composition.mdx b/apps/docs/content/docs/overview/composition.mdx index 688852a3..9a1bad54 100644 --- a/apps/docs/content/docs/overview/composition.mdx +++ b/apps/docs/content/docs/overview/composition.mdx @@ -42,7 +42,6 @@ primitives when `ComboboxField` does not fit your control, popover, or loading U Give the custom component the same accessibility care as a composed component. Preserve its @@ -58,7 +57,6 @@ Return one DOM root. Custom wrappers must pass the supplied `ref` to that elemen The second `render` argument contains interaction state such as `isPressed`. diff --git a/apps/docs/content/docs/overview/getting-started.mdx b/apps/docs/content/docs/overview/getting-started.mdx index 529b9f7b..d9670cb5 100644 --- a/apps/docs/content/docs/overview/getting-started.mdx +++ b/apps/docs/content/docs/overview/getting-started.mdx @@ -43,31 +43,14 @@ provides the reset, base typography, and semantic variables for its children. Import each component from its package path. The setup above renders `Text`. `Button` comes from `@luke-ui/react/button`. -```tsx -import { Button } from '@luke-ui/react/button'; -import { Text } from '@luke-ui/react/text'; - -export function Welcome() { - return ( - <> - Welcome to Luke UI. - - - ); -} -``` + ## Change the theme Tactile is the default bundled identity. Paper uses the same component APIs with a flatter visual treatment. Switch the CSS import and class together. -```tsx -import '@luke-ui/react/themes/paper.css'; -import { paperThemeClassName } from '@luke-ui/react/themes'; - -
{children}
; -``` + Set `data-color-mode="light"` or `data-color-mode="dark"` on a themed element when the application must use a specific mode. Without it, Luke UI follows the system preference. diff --git a/apps/docs/content/docs/overview/iconography.mdx b/apps/docs/content/docs/overview/iconography.mdx index 0e81158d..2ab96c58 100644 --- a/apps/docs/content/docs/overview/iconography.mdx +++ b/apps/docs/content/docs/overview/iconography.mdx @@ -16,40 +16,28 @@ file. Import `Icon` and give it a name from the set. The `name` prop accepts only the names in the gallery above. The compiler rejects any other name. - + ## Size Set `size` to `xsmall`, `small`, `medium`, or `large`. Each size is a theme token, not a pixel value. A custom theme can give each size a different value. - + The default size is `medium`. To give a group of icons the same size, put an `IconSizeProvider` around them. An icon that has its own `size` prop keeps that size. - + ## Colour An icon takes the colour of the text around it. To change the colour of an icon, set the colour on the icon or on a parent element. - + An icon that gives information must have a contrast ratio of 3 to 1 or more against its background. An icon that only decorates adjacent text has no contrast requirement. @@ -61,20 +49,12 @@ Each icon is decorative or informative. Use the correct one. The icon is decorative when the text next to it gives the meaning. Do not give it a title. The component then hides the icon from assistive technology. - + The icon is informative when it appears alone. Give it a `title`. The component then shows the icon to assistive technology as an image. - + Do not set `aria-hidden` and `title` on the same icon. @@ -86,13 +66,7 @@ The `Icon` component reads its symbols from a spritesheet file. The package supp Put an `IconSpritesheetProvider` around your application. Give the provider the URL of the spritesheet file. -```tsx -import { IconSpritesheetProvider } from '@luke-ui/react/icon'; - - - -; -``` + Your bundler must give a URL for the spritesheet file. It must not inline the file as a `data:` URL, because a `` reference to a `data:` URL does not resolve in all browsers. In Vite, the diff --git a/apps/docs/content/docs/overview/layout.mdx b/apps/docs/content/docs/overview/layout.mdx index 3ef62ad7..fb588b9c 100644 --- a/apps/docs/content/docs/overview/layout.mdx +++ b/apps/docs/content/docs/overview/layout.mdx @@ -40,11 +40,7 @@ from `xsmall`, so specify only the points where the layout changes. The available breakpoints are `xsmall` (base), `small` (640px), `medium` (768px), `large` (1024px), `xlarge` (1280px), and `xxlarge` (1536px). - + ## Spacing and sizing diff --git a/apps/docs/content/docs/overview/radius.mdx b/apps/docs/content/docs/overview/radius.mdx index 31a09348..b6bb783a 100644 --- a/apps/docs/content/docs/overview/radius.mdx +++ b/apps/docs/content/docs/overview/radius.mdx @@ -10,11 +10,7 @@ job, not a fixed pixel value. The public variables adapt to the active theme. Luke UI exposes five radius roles, each matched to the kind of element it rounds. - + ## Use the active theme @@ -39,11 +35,7 @@ A rounded surface sometimes sits inside another. Derive the wrapper's radius fro so the two corners stay concentric. Pass the space between their corners (usually the wrapper's padding) as the gap. - + ```tsx import { deriveConcentricRadius, vars } from '@luke-ui/react/theme'; diff --git a/apps/docs/content/docs/overview/shadow.mdx b/apps/docs/content/docs/overview/shadow.mdx index fbc730d5..ab960f70 100644 --- a/apps/docs/content/docs/overview/shadow.mdx +++ b/apps/docs/content/docs/overview/shadow.mdx @@ -11,11 +11,7 @@ shadow for each role, so a custom surface adapts to the current identity and col Luke UI exposes five depth roles. The scale below reads from `vars.depth`, so it always reflects the public theme contract for the active identity and colour mode. - + Use a component's API before you set depth yourself. Components already apply the right depth for each of their states. Use `vars.depth` when you build a custom surface that needs to belong to the diff --git a/apps/docs/content/docs/overview/styling.mdx b/apps/docs/content/docs/overview/styling.mdx index bc407c60..12ed06e8 100644 --- a/apps/docs/content/docs/overview/styling.mdx +++ b/apps/docs/content/docs/overview/styling.mdx @@ -26,13 +26,7 @@ Components are intentionally opinionated. Their public props cover supported var behaviour. The active theme provides the semantic colours, typography, spacing, radii, and depth that make those components work together. -```tsx -import { Button } from '@luke-ui/react/button'; - -; -``` + ### Compose from primitives @@ -40,14 +34,7 @@ Use a documented primitive when component props do not provide the structure you keep the accessibility and visual contract for a component family. They leave its children and composition to your application. -```tsx -import { Button } from '@luke-ui/react/button/primitive'; - -; -``` + ### Build custom UI with public recipes and variables @@ -55,28 +42,11 @@ Recipes from `@luke-ui/react/recipes` are public, component-specific styling API custom composition follows that recipe's documented element contract. Do not copy or target its generated selectors. -```tsx -import { button } from '@luke-ui/react/recipes'; - -; -``` + The public `vars` token contract lets an application-owned element follow the active theme. -```tsx -import { vars } from '@luke-ui/react/theme'; - -