@openwarelabs/ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Openware UI
2
2
 
3
- React components and design tokens with Commandr's look: a midnight brand colour, a brass accent kept small, cool slate surfaces, tactile buttons that press in, and Inter. Light and dark themes, and a brand colour you can swap.
3
+ React components and design tokens with a quiet, tactile look: a midnight brand colour, a brass accent kept small, cool slate surfaces, buttons that press in, and Inter. Light and dark themes, and a brand colour you can swap.
4
4
 
5
5
  ## Docs
6
6
 
@@ -98,4 +98,4 @@ The docs' header has a colour picker that does this live, and the Theming page s
98
98
 
99
99
  ## Credits
100
100
 
101
- Built from the components and styles of Commandr. Icons drawn inside the components are Lucide shapes (ISC). Inter and Geist Mono are under the SIL Open Font License 1.1. Toasts use sonner and the colour picker uses react-colorful, both under the MIT licence.
101
+ Icons drawn inside the components are Lucide shapes (ISC). Inter and Geist Mono are under the SIL Open Font License 1.1. Toasts use sonner and the colour picker uses react-colorful, both under the MIT licence.
@@ -21,7 +21,7 @@ export interface DisclosureProps {
21
21
  children: ReactNode;
22
22
  className?: string;
23
23
  }
24
- /** A section that opens and closes under its title, like Commandr's "3 files changed". */
24
+ /** A section that opens and closes under its title, like "3 files changed" in a code review. */
25
25
  export declare function Disclosure({ open, defaultOpen, onOpenChange, variant, headingLevel, className, ...props }: DisclosureProps): import("react").JSX.Element;
26
26
  export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
27
27
  /** `single` keeps one item open at a time; `multiple` lets any number be open.
@@ -21,7 +21,7 @@ export interface DisclosureProps {
21
21
  children: ReactNode;
22
22
  className?: string;
23
23
  }
24
- /** A section that opens and closes under its title, like Commandr's "3 files changed". */
24
+ /** A section that opens and closes under its title, like "3 files changed" in a code review. */
25
25
  export declare function Disclosure({ open, defaultOpen, onOpenChange, variant, headingLevel, className, ...props }: DisclosureProps): import("react").JSX.Element;
26
26
  export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
27
27
  /** `single` keeps one item open at a time; `multiple` lets any number be open.
@@ -24,5 +24,5 @@ export interface UserProps {
24
24
  size?: AvatarProps["size"];
25
25
  className?: string;
26
26
  }
27
- /** A person: avatar, name and a line about them, as in Commandr's account menu. */
27
+ /** A person: avatar, name and a line about them, as in an account menu. */
28
28
  export declare function User({ name, description, src, size, className }: UserProps): import("react").JSX.Element;
@@ -24,5 +24,5 @@ export interface UserProps {
24
24
  size?: AvatarProps["size"];
25
25
  className?: string;
26
26
  }
27
- /** A person: avatar, name and a line about them, as in Commandr's account menu. */
27
+ /** A person: avatar, name and a line about them, as in an account menu. */
28
28
  export declare function User({ name, description, src, size, className }: UserProps): import("react").JSX.Element;
@@ -36,7 +36,7 @@ export interface CodeBlockProps {
36
36
  maxHeight?: number;
37
37
  className?: string;
38
38
  }
39
- /** Code on Commandr's night ground, the same in both themes, with a copy button. */
39
+ /** Code on a night ground, the same in both themes, with a copy button. */
40
40
  export declare function CodeBlock({ code, html, title, language, showLineNumbers, copyable, maxHeight, className }: CodeBlockProps): import("react").JSX.Element;
41
41
  export interface SnippetProps {
42
42
  /** The command or value, copied as is. */
@@ -36,7 +36,7 @@ export interface CodeBlockProps {
36
36
  maxHeight?: number;
37
37
  className?: string;
38
38
  }
39
- /** Code on Commandr's night ground, the same in both themes, with a copy button. */
39
+ /** Code on a night ground, the same in both themes, with a copy button. */
40
40
  export declare function CodeBlock({ code, html, title, language, showLineNumbers, copyable, maxHeight, className }: CodeBlockProps): import("react").JSX.Element;
41
41
  export interface SnippetProps {
42
42
  /** The command or value, copied as is. */
@@ -23,7 +23,7 @@ export interface FileDropZoneProps {
23
23
  className?: string;
24
24
  }
25
25
  /**
26
- * Commandr's folder drop zone, for files: drop them on it, or press it to pick them.
26
+ * A drop zone for files: drop them on it, or press it to pick them.
27
27
  * It checks the type and size and says what was wrong.
28
28
  */
29
29
  export declare function FileDropZone({ onFiles, accept, multiple, maxSize, label, hint, error, icon, disabled, name, className, }: FileDropZoneProps): import("react").JSX.Element;
@@ -23,7 +23,7 @@ export interface FileDropZoneProps {
23
23
  className?: string;
24
24
  }
25
25
  /**
26
- * Commandr's folder drop zone, for files: drop them on it, or press it to pick them.
26
+ * A drop zone for files: drop them on it, or press it to pick them.
27
27
  * It checks the type and size and says what was wrong.
28
28
  */
29
29
  export declare function FileDropZone({ onFiles, accept, multiple, maxSize, label, hint, error, icon, disabled, name, className, }: FileDropZoneProps): import("react").JSX.Element;
@@ -23,7 +23,7 @@ export interface FileTreeProps {
23
23
  className?: string;
24
24
  }
25
25
  /**
26
- * Commandr's project structure explorer: folders open and close, files can be selected.
26
+ * A project structure explorer: folders open and close, files can be selected.
27
27
  * Up and Down move, Right opens a folder or goes into it, Left closes it or goes to its parent.
28
28
  */
29
29
  export declare function FileTree({ items, selected, defaultSelected, onSelect, defaultExpanded, label, className, }: FileTreeProps): import("react").JSX.Element;
@@ -23,7 +23,7 @@ export interface FileTreeProps {
23
23
  className?: string;
24
24
  }
25
25
  /**
26
- * Commandr's project structure explorer: folders open and close, files can be selected.
26
+ * A project structure explorer: folders open and close, files can be selected.
27
27
  * Up and Down move, Right opens a folder or goes into it, Left closes it or goes to its parent.
28
28
  */
29
29
  export declare function FileTree({ items, selected, defaultSelected, onSelect, defaultExpanded, label, className, }: FileTreeProps): import("react").JSX.Element;
@@ -12,7 +12,7 @@ export interface ProgressBarProps {
12
12
  showValue?: boolean;
13
13
  /** The text shown and read out for the value, e.g. "3 of 8 stages". Defaults to a percentage. */
14
14
  valueLabel?: string;
15
- /** sm is 4px, Commandr's pipeline bar; md is 8px.
15
+ /** sm is 4px, for a pipeline bar; md is 8px.
16
16
  * @default "sm" */
17
17
  size?: "sm" | "md";
18
18
  /** @default "primary" */
@@ -12,7 +12,7 @@ export interface ProgressBarProps {
12
12
  showValue?: boolean;
13
13
  /** The text shown and read out for the value, e.g. "3 of 8 stages". Defaults to a percentage. */
14
14
  valueLabel?: string;
15
- /** sm is 4px, Commandr's pipeline bar; md is 8px.
15
+ /** sm is 4px, for a pipeline bar; md is 8px.
16
16
  * @default "sm" */
17
17
  size?: "sm" | "md";
18
18
  /** @default "primary" */
@@ -16,5 +16,5 @@ export interface StatProps {
16
16
  trend?: number[];
17
17
  className?: string;
18
18
  }
19
- /** One headline number with its label, change and trend, like Commandr's overview cards. */
19
+ /** One headline number with its label, change and trend, for overview cards. */
20
20
  export declare function Stat({ label, value, icon, change, changeTone, description, trend, className }: StatProps): import("react").JSX.Element;
@@ -16,5 +16,5 @@ export interface StatProps {
16
16
  trend?: number[];
17
17
  className?: string;
18
18
  }
19
- /** One headline number with its label, change and trend, like Commandr's overview cards. */
19
+ /** One headline number with its label, change and trend, for overview cards. */
20
20
  export declare function Stat({ label, value, icon, change, changeTone, description, trend, className }: StatProps): import("react").JSX.Element;
@@ -13,7 +13,7 @@ export interface StepsProps {
13
13
  /** The index of the step in progress. Steps before it are done. Use items.length when every step is done.
14
14
  * @default 0 */
15
15
  current?: number;
16
- /** `vertical` is Commandr's first-run checklist; `horizontal` is a compact progress strip.
16
+ /** `vertical` is a first-run checklist; `horizontal` is a compact progress strip.
17
17
  * @default "vertical" */
18
18
  orientation?: "vertical" | "horizontal";
19
19
  /** A heading above a vertical list, with a "2 of 4 done" count beside it. */
@@ -13,7 +13,7 @@ export interface StepsProps {
13
13
  /** The index of the step in progress. Steps before it are done. Use items.length when every step is done.
14
14
  * @default 0 */
15
15
  current?: number;
16
- /** `vertical` is Commandr's first-run checklist; `horizontal` is a compact progress strip.
16
+ /** `vertical` is a first-run checklist; `horizontal` is a compact progress strip.
17
17
  * @default "vertical" */
18
18
  orientation?: "vertical" | "horizontal";
19
19
  /** A heading above a vertical list, with a "2 of 4 done" count beside it. */
@@ -5,7 +5,7 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChang
5
5
  /** The tab selected first when uncontrolled. */
6
6
  defaultValue?: string;
7
7
  onValueChange?(value: string): void;
8
- /** `segmented` raises the chosen tab in a well (Commandr's switcher); `line` underlines it.
8
+ /** `segmented` raises the chosen tab in a well; `line` underlines it.
9
9
  * @default "segmented" */
10
10
  variant?: "segmented" | "line";
11
11
  children: ReactNode;
@@ -5,7 +5,7 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChang
5
5
  /** The tab selected first when uncontrolled. */
6
6
  defaultValue?: string;
7
7
  onValueChange?(value: string): void;
8
- /** `segmented` raises the chosen tab in a well (Commandr's switcher); `line` underlines it.
8
+ /** `segmented` raises the chosen tab in a well; `line` underlines it.
9
9
  * @default "segmented" */
10
10
  variant?: "segmented" | "line";
11
11
  children: ReactNode;
@@ -441,7 +441,7 @@
441
441
  border-bottom-right-radius: 0;
442
442
  }
443
443
 
444
- /* CloseButton: Commandr's dialog close, a quiet square that darkens on hover. */
444
+ /* CloseButton: a quiet square that darkens on hover, for dialogs and panels. */
445
445
  .ow-close-button {
446
446
  display: inline-flex;
447
447
  flex-shrink: 0;
@@ -481,7 +481,7 @@
481
481
  }
482
482
 
483
483
  /* components/SegmentedControl/SegmentedControl.css */
484
- /* SegmentedControl and segmented Tabs: Commandr's journey switcher, a well with the chosen segment raised. */
484
+ /* SegmentedControl and segmented Tabs: a well with the chosen segment raised. */
485
485
  .ow-segmented,
486
486
  .ow-tabs--segmented .ow-tabs__list {
487
487
  position: relative;
@@ -1781,7 +1781,7 @@
1781
1781
  }
1782
1782
 
1783
1783
  /* components/FileDropZone/FileDropZone.css */
1784
- /* FileDropZone: Commandr's folder drop zone, a dashed well that turns primary while something is dragged over it. */
1784
+ /* FileDropZone: a dashed well that turns primary while something is dragged over it. */
1785
1785
  .ow-dropzone {
1786
1786
  display: flex;
1787
1787
  min-height: 128px;
@@ -2123,7 +2123,7 @@
2123
2123
  transition: width var(--ow-duration-slow) var(--ow-ease-standard);
2124
2124
  }
2125
2125
 
2126
- /* Unknown length: a segment sliding across, like Commandr's licence check. */
2126
+ /* Unknown length: a segment sliding across. */
2127
2127
  .ow-progress__track--indeterminate .ow-progress__fill {
2128
2128
  width: 37%;
2129
2129
  animation: ow-progress-slide 1.3s var(--ow-ease-standard) infinite;
@@ -2341,7 +2341,7 @@
2341
2341
  box-shadow: none;
2342
2342
  }
2343
2343
 
2344
- /* The ✕ sits on the corner, as in Commandr. */
2344
+ /* The ✕ sits on the corner. */
2345
2345
  .ow-toaster.ow-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
2346
2346
  width: 22px;
2347
2347
  height: 22px;
@@ -3360,7 +3360,7 @@
3360
3360
  }
3361
3361
 
3362
3362
  /* components/Accordion/Accordion.css */
3363
- /* Disclosure and Accordion: Commandr's change review header, a chevron that turns as the panel opens. */
3363
+ /* Disclosure and Accordion: a header with a chevron that turns as the panel opens. */
3364
3364
  .ow-disclosure,
3365
3365
  .ow-accordion--bordered,
3366
3366
  .ow-accordion--separated .ow-accordion__item {
@@ -3699,7 +3699,7 @@
3699
3699
  }
3700
3700
 
3701
3701
  /* components/Steps/Steps.css */
3702
- /* Steps: Commandr's setup checklist (vertical) and a compact strip (horizontal). */
3702
+ /* Steps: a setup checklist (vertical) and a compact strip (horizontal). */
3703
3703
  .ow-steps--vertical {
3704
3704
  border: 1px solid var(--ow-border);
3705
3705
  border-radius: var(--ow-radius-container);
@@ -4565,7 +4565,7 @@
4565
4565
  }
4566
4566
 
4567
4567
  /* components/Stat/Stat.css */
4568
- /* Stat: Commandr's overview card. A muted label, a big tabular number, a change and an optional trend line. */
4568
+ /* Stat: an overview card. A muted label, a big tabular number, a change and an optional trend line. */
4569
4569
  .ow-stat {
4570
4570
  display: grid;
4571
4571
  min-width: 0;
@@ -4675,7 +4675,7 @@
4675
4675
  }
4676
4676
 
4677
4677
  /* components/FileTree/FileTree.css */
4678
- /* FileTree: Commandr's structure explorer. Monospace names, hairline guides, a tinted selected file. */
4678
+ /* FileTree: a project structure explorer. Monospace names, hairline guides, a tinted selected file. */
4679
4679
  .ow-tree,
4680
4680
  .ow-tree__group {
4681
4681
  margin: 0;