@salemcobalt/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/dist/index.d.ts CHANGED
@@ -741,7 +741,7 @@ declare const Dialog: {
741
741
  Close: typeof Close;
742
742
  };
743
743
 
744
- declare const version = "0.1.0";
744
+ declare const version = "0.1.1";
745
745
 
746
746
  export { Badge, Button, Card, Dialog, Inline, Kbd, Stack, version };
747
747
  export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, InlineAlign, InlineElement, InlineJustify, InlineProps, KbdGroupProps, KbdProps, SpacingSize, StackAlign, StackElement, StackJustify, StackProps };
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { useRender } from '@base-ui/react/use-render';
3
- import { Children, Fragment, createElement } from 'react';
4
- import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
1
+ 'use client';
5
2
 
6
3
  // src/utils/cx.ts
7
4
  function cx(...parts) {
8
5
  return parts.filter(Boolean).join(" ");
9
6
  }
7
+
8
+ // src/components/Button/Button.tsx
9
+ import { jsx, jsxs } from "react/jsx-runtime";
10
10
  function Button({
11
11
  variant = "primary",
12
12
  size = "md",
@@ -48,6 +48,9 @@ function Button({
48
48
  }
49
49
  );
50
50
  }
51
+
52
+ // src/components/Badge/Badge.tsx
53
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
51
54
  function Badge({
52
55
  tone = "neutral",
53
56
  variant = "soft",
@@ -57,7 +60,7 @@ function Badge({
57
60
  children,
58
61
  ...rest
59
62
  }) {
60
- return /* @__PURE__ */ jsxs(
63
+ return /* @__PURE__ */ jsxs2(
61
64
  "span",
62
65
  {
63
66
  className: cx("sc-badge", className),
@@ -66,12 +69,15 @@ function Badge({
66
69
  "data-size": size,
67
70
  ...rest,
68
71
  children: [
69
- dot ? /* @__PURE__ */ jsx("span", { className: "sc-badge__dot", "aria-hidden": "true" }) : null,
72
+ dot ? /* @__PURE__ */ jsx2("span", { className: "sc-badge__dot", "aria-hidden": "true" }) : null,
70
73
  children
71
74
  ]
72
75
  }
73
76
  );
74
77
  }
78
+
79
+ // src/components/Card/Card.tsx
80
+ import { useRender } from "@base-ui/react/use-render";
75
81
  function Card({
76
82
  variant = "outlined",
77
83
  padding = "md",
@@ -97,6 +103,9 @@ function Card({
97
103
  }
98
104
  });
99
105
  }
106
+
107
+ // src/components/Stack/Stack.tsx
108
+ import { createElement } from "react";
100
109
  function Stack({
101
110
  gap = "sm",
102
111
  align = "stretch",
@@ -115,6 +124,9 @@ function Stack({
115
124
  ...rest
116
125
  });
117
126
  }
127
+
128
+ // src/components/Inline/Inline.tsx
129
+ import { createElement as createElement2 } from "react";
118
130
  function Inline({
119
131
  gap = "xs",
120
132
  align = "center",
@@ -124,7 +136,7 @@ function Inline({
124
136
  className,
125
137
  ...rest
126
138
  }) {
127
- return createElement(as, {
139
+ return createElement2(as, {
128
140
  className: cx("sc-inline", className),
129
141
  "data-gap": gap,
130
142
  "data-align": align,
@@ -133,20 +145,28 @@ function Inline({
133
145
  ...rest
134
146
  });
135
147
  }
148
+
149
+ // src/components/Kbd/Kbd.tsx
150
+ import { Children, Fragment } from "react";
151
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
136
152
  function KbdBase({ className, ...rest }) {
137
- return /* @__PURE__ */ jsx("kbd", { className: cx("sc-kbd", className), ...rest });
153
+ return /* @__PURE__ */ jsx3("kbd", { className: cx("sc-kbd", className), ...rest });
138
154
  }
139
155
  function KbdGroup({ label, separator = "plus", className, children, ...rest }) {
140
156
  const keys = Children.toArray(children);
141
- return /* @__PURE__ */ jsx("span", { role: "group", "aria-label": label, className: cx("sc-kbd-group", className), ...rest, children: keys.map((key, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
142
- i > 0 && separator === "plus" ? /* @__PURE__ */ jsx("span", { className: "sc-kbd-group__sep", "aria-hidden": "true", children: "+" }) : null,
157
+ return /* @__PURE__ */ jsx3("span", { role: "group", "aria-label": label, className: cx("sc-kbd-group", className), ...rest, children: keys.map((key, i) => /* @__PURE__ */ jsxs3(Fragment, { children: [
158
+ i > 0 && separator === "plus" ? /* @__PURE__ */ jsx3("span", { className: "sc-kbd-group__sep", "aria-hidden": "true", children: "+" }) : null,
143
159
  key
144
160
  ] }, i)) });
145
161
  }
146
162
  var Kbd = Object.assign(KbdBase, { Group: KbdGroup });
163
+
164
+ // src/components/Dialog/Dialog.tsx
165
+ import { Dialog as BaseDialog } from "@base-ui/react/dialog";
166
+ import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
147
167
  function Root({ dismissible = true, onOpenChange, open, defaultOpen, children }) {
148
- return /* @__PURE__ */ jsx(
149
- Dialog$1.Root,
168
+ return /* @__PURE__ */ jsx4(
169
+ BaseDialog.Root,
150
170
  {
151
171
  open,
152
172
  defaultOpen,
@@ -162,12 +182,12 @@ function Root({ dismissible = true, onOpenChange, open, defaultOpen, children })
162
182
  }
163
183
  );
164
184
  }
165
- var Trigger = Dialog$1.Trigger;
185
+ var Trigger = BaseDialog.Trigger;
166
186
  function Content({ size = "md", className, children, ...rest }) {
167
- return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
168
- /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "sc-dialog__backdrop" }),
169
- /* @__PURE__ */ jsx(
170
- Dialog$1.Popup,
187
+ return /* @__PURE__ */ jsxs4(BaseDialog.Portal, { children: [
188
+ /* @__PURE__ */ jsx4(BaseDialog.Backdrop, { className: "sc-dialog__backdrop" }),
189
+ /* @__PURE__ */ jsx4(
190
+ BaseDialog.Popup,
171
191
  {
172
192
  className: cx("sc-dialog__popup", className),
173
193
  "data-size": size,
@@ -179,20 +199,20 @@ function Content({ size = "md", className, children, ...rest }) {
179
199
  ] });
180
200
  }
181
201
  function Title({ className, ...rest }) {
182
- return /* @__PURE__ */ jsx(Dialog$1.Title, { className: cx("sc-dialog__title", className), ...rest });
202
+ return /* @__PURE__ */ jsx4(BaseDialog.Title, { className: cx("sc-dialog__title", className), ...rest });
183
203
  }
184
204
  function Description({ className, ...rest }) {
185
- return /* @__PURE__ */ jsx(Dialog$1.Description, { className: cx("sc-dialog__description", className), ...rest });
205
+ return /* @__PURE__ */ jsx4(BaseDialog.Description, { className: cx("sc-dialog__description", className), ...rest });
186
206
  }
187
207
  function Body({ className, ...rest }) {
188
- return /* @__PURE__ */ jsx("div", { className: cx("sc-dialog__body", className), ...rest });
208
+ return /* @__PURE__ */ jsx4("div", { className: cx("sc-dialog__body", className), ...rest });
189
209
  }
190
210
  function Actions({ className, ...rest }) {
191
- return /* @__PURE__ */ jsx(Inline, { justify: "end", className: cx("sc-dialog__actions", className), ...rest });
211
+ return /* @__PURE__ */ jsx4(Inline, { justify: "end", className: cx("sc-dialog__actions", className), ...rest });
192
212
  }
193
213
  function Close({ className, children, render, ...rest }) {
194
214
  if (children === void 0 && render === void 0) {
195
- return /* @__PURE__ */ jsx(Dialog$1.Close, { className: cx("sc-dialog__close", className), "aria-label": "Close", ...rest, children: /* @__PURE__ */ jsx(
215
+ return /* @__PURE__ */ jsx4(BaseDialog.Close, { className: cx("sc-dialog__close", className), "aria-label": "Close", ...rest, children: /* @__PURE__ */ jsx4(
196
216
  "svg",
197
217
  {
198
218
  width: "16",
@@ -202,17 +222,24 @@ function Close({ className, children, render, ...rest }) {
202
222
  stroke: "currentColor",
203
223
  strokeWidth: "1.75",
204
224
  "aria-hidden": "true",
205
- children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
225
+ children: /* @__PURE__ */ jsx4("path", { d: "M4 4l8 8M12 4l-8 8" })
206
226
  }
207
227
  ) });
208
228
  }
209
- return /* @__PURE__ */ jsx(Dialog$1.Close, { className, render, ...rest, children });
229
+ return /* @__PURE__ */ jsx4(BaseDialog.Close, { className, render, ...rest, children });
210
230
  }
211
231
  var Dialog = { Root, Trigger, Content, Title, Description, Body, Actions, Close };
212
232
 
213
233
  // src/index.ts
214
- var version = "0.1.0";
215
-
216
- export { Badge, Button, Card, Dialog, Inline, Kbd, Stack, version };
217
- //# sourceMappingURL=index.js.map
234
+ var version = "0.1.1";
235
+ export {
236
+ Badge,
237
+ Button,
238
+ Card,
239
+ Dialog,
240
+ Inline,
241
+ Kbd,
242
+ Stack,
243
+ version
244
+ };
218
245
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/cx.ts","../src/components/Button/Button.tsx","../src/components/Badge/Badge.tsx","../src/components/Card/Card.tsx","../src/components/Stack/Stack.tsx","../src/components/Inline/Inline.tsx","../src/components/Kbd/Kbd.tsx","../src/components/Dialog/Dialog.tsx","../src/index.ts"],"names":["jsxs","jsx","createElement","BaseDialog"],"mappings":"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","file":"index.js","sourcesContent":["/** Joins class names, dropping falsy entries. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n return parts.filter(Boolean).join(' ');\n}\n","import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends ComponentPropsWithRef<'button'> {\n /** `primary` for the one main action in a view, `secondary` for the rest, `ghost` in toolbars and rows, `danger` for destructive confirmations. */\n variant?: ButtonVariant | undefined;\n /** 32, 40 or 48px tall. Compact density shrinks each by one step. */\n size?: ButtonSize | undefined;\n /** A 16px icon before the label. */\n iconStart?: ReactNode | undefined;\n /** A 16px icon after the label. */\n iconEnd?: ReactNode | undefined;\n /** Keeps the width, hides the label, shows a spinner, sets `aria-busy` and ignores clicks. */\n loading?: boolean | undefined;\n /** Stretches to the container. */\n fullWidth?: boolean | undefined;\n}\n\n/** The one way to trigger an action. Renders a native `<button>`; `type` defaults to `button`. */\nexport function Button({\n variant = 'primary',\n size = 'md',\n iconStart,\n iconEnd,\n loading = false,\n fullWidth = false,\n type = 'button',\n className,\n children,\n onClick,\n ...rest\n}: ButtonProps) {\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n };\n return (\n <button\n type={type}\n className={cx('sc-button', className)}\n data-variant={variant}\n data-size={size}\n data-loading={loading || undefined}\n data-full-width={fullWidth || undefined}\n aria-busy={loading || undefined}\n onClick={handleClick}\n {...rest}\n >\n {iconStart ? (\n <span className=\"sc-button__icon\" aria-hidden=\"true\">\n {iconStart}\n </span>\n ) : null}\n <span className=\"sc-button__label\">{children}</span>\n {iconEnd ? (\n <span className=\"sc-button__icon\" aria-hidden=\"true\">\n {iconEnd}\n </span>\n ) : null}\n {loading ? <span className=\"sc-button__spinner\" aria-hidden=\"true\" /> : null}\n </button>\n );\n}\n","import type { ComponentPropsWithRef } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';\nexport type BadgeVariant = 'soft' | 'solid' | 'outline';\nexport type BadgeSize = 'sm' | 'md';\n\nexport interface BadgeProps extends ComponentPropsWithRef<'span'> {\n /** Color reinforces the status; the word is the status. */\n tone?: BadgeTone | undefined;\n /** `soft` tinted fill (default), `solid` filled, `outline` hairline. */\n variant?: BadgeVariant | undefined;\n /** `md` 24px (default) or `sm` 20px for table rows and Card headers. */\n size?: BadgeSize | undefined;\n /** A 6px dot before the label for scannable lists. */\n dot?: boolean | undefined;\n}\n\n/** One or two words of status beside a thing. Text only; never clickable. */\nexport function Badge({\n tone = 'neutral',\n variant = 'soft',\n size = 'md',\n dot = false,\n className,\n children,\n ...rest\n}: BadgeProps) {\n return (\n <span\n className={cx('sc-badge', className)}\n data-tone={tone}\n data-variant={variant}\n data-size={size}\n {...rest}\n >\n {dot ? <span className=\"sc-badge__dot\" aria-hidden=\"true\" /> : null}\n {children}\n </span>\n );\n}\n","import { useRender } from '@base-ui/react/use-render';\nimport { cx } from '../../utils/cx';\n\nexport type CardVariant = 'outlined' | 'elevated' | 'filled';\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\nexport type CardElement = 'div' | 'article' | 'section' | 'li' | 'a' | 'button';\n\nexport interface CardProps extends useRender.ComponentProps<'div'> {\n /** `outlined` hairline (default), `elevated` floats, `filled` is an inset region. */\n variant?: CardVariant | undefined;\n /** `none`, `sm` 12px, `md` 16px (default), `lg` 24px. */\n padding?: CardPadding | undefined;\n /** Hover lifts the card and the whole card is the target. Render it as `a` or `button` so it is a real control. */\n interactive?: boolean | undefined;\n /** Accent border with a 1px inset, for the active row or chosen option. */\n selected?: boolean | undefined;\n /** Element to render when `render` is not given. */\n as?: CardElement | undefined;\n}\n\n/** A bordered surface that groups related content. Compose the inside with Stack and Inline. */\nexport function Card({\n variant = 'outlined',\n padding = 'md',\n interactive = false,\n selected = false,\n as = 'div',\n render,\n className,\n ref,\n ...rest\n}: CardProps) {\n return useRender({\n render,\n ref,\n defaultTagName: as,\n props: {\n className: cx('sc-card', className),\n 'data-variant': variant,\n 'data-padding': padding,\n 'data-interactive': interactive || undefined,\n 'data-selected': selected || undefined,\n ...rest,\n },\n });\n}\n","import { createElement, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport type { SpacingSize } from '../../types';\nimport { cx } from '../../utils/cx';\n\nexport type StackAlign = 'stretch' | 'start' | 'center' | 'end';\nexport type StackJustify = 'start' | 'center' | 'end' | 'between';\nexport type StackElement = 'div' | 'section' | 'ul' | 'ol' | 'nav' | 'form';\n\nexport interface StackProps extends ComponentPropsWithRef<'div'> {\n /** Gap from the spacing scale. Default `sm` (12px). */\n gap?: SpacingSize | undefined;\n /** Cross-axis alignment. Default `stretch`. */\n align?: StackAlign | undefined;\n /** Main-axis distribution. Default `start`. */\n justify?: StackJustify | undefined;\n /** Element to render. Use `ul`/`ol` for lists so semantics survive the layout. */\n as?: StackElement | undefined;\n /** Lays out as `inline-flex`. */\n inline?: boolean | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Vertical flex layout with a token gap. The only way children should be spaced vertically. */\nexport function Stack({\n gap = 'sm',\n align = 'stretch',\n justify = 'start',\n as = 'div',\n inline = false,\n className,\n ...rest\n}: StackProps) {\n return createElement(as, {\n className: cx('sc-stack', className),\n 'data-gap': gap,\n 'data-align': align,\n 'data-justify': justify,\n 'data-inline': inline || undefined,\n ...rest,\n });\n}\n","import { createElement, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport type { SpacingSize } from '../../types';\nimport { cx } from '../../utils/cx';\n\nexport type InlineAlign = 'center' | 'start' | 'end' | 'baseline' | 'stretch';\nexport type InlineJustify = 'start' | 'center' | 'end' | 'between';\nexport type InlineElement = 'div' | 'span' | 'ul' | 'nav';\n\nexport interface InlineProps extends ComponentPropsWithRef<'div'> {\n /** Gap from the spacing scale. Default `xs` (8px). */\n gap?: SpacingSize | undefined;\n /** Cross-axis alignment. Default `center`; use `baseline` when mixing text sizes. */\n align?: InlineAlign | undefined;\n /** Main-axis distribution. Default `start`. */\n justify?: InlineJustify | undefined;\n /** Wraps by default; `false` for toolbars that scroll. */\n wrap?: boolean | undefined;\n /** Element to render. */\n as?: InlineElement | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Horizontal flex layout that wraps. For rows of buttons, badges, metadata and key combinations. */\nexport function Inline({\n gap = 'xs',\n align = 'center',\n justify = 'start',\n wrap = true,\n as = 'div',\n className,\n ...rest\n}: InlineProps) {\n return createElement(as, {\n className: cx('sc-inline', className),\n 'data-gap': gap,\n 'data-align': align,\n 'data-justify': justify,\n 'data-nowrap': wrap ? undefined : '',\n ...rest,\n });\n}\n","import { Children, Fragment, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type KbdProps = ComponentPropsWithRef<'kbd'>;\n\n/** A single key, rendered like a keycap. One Kbd per key; group keys with `Kbd.Group`. */\nfunction KbdBase({ className, ...rest }: KbdProps) {\n return <kbd className={cx('sc-kbd', className)} {...rest} />;\n}\n\nexport interface KbdGroupProps extends ComponentPropsWithRef<'span'> {\n /** The readable combination, announced instead of the symbols: \"Command K\". */\n label: string;\n /** `plus` (default) draws a muted + between keys; `space` leaves a gap. */\n separator?: 'plus' | 'space' | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Groups the keys of one shortcut. */\nfunction KbdGroup({ label, separator = 'plus', className, children, ...rest }: KbdGroupProps) {\n const keys = Children.toArray(children);\n return (\n <span role=\"group\" aria-label={label} className={cx('sc-kbd-group', className)} {...rest}>\n {keys.map((key, i) => (\n <Fragment key={i}>\n {i > 0 && separator === 'plus' ? (\n <span className=\"sc-kbd-group__sep\" aria-hidden=\"true\">\n +\n </span>\n ) : null}\n {key}\n </Fragment>\n ))}\n </span>\n );\n}\n\nexport const Kbd = Object.assign(KbdBase, { Group: KbdGroup });\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { Inline, type InlineProps } from '../Inline/Inline';\nimport { cx } from '../../utils/cx';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\n\nexport interface DialogRootProps {\n /** Controlled open state. */\n open?: boolean | undefined;\n /** Initial open state when uncontrolled. */\n defaultOpen?: boolean | undefined;\n /** Called when the dialog opens or closes. */\n onOpenChange?: ((open: boolean) => void) | undefined;\n /** When `false`, Esc and backdrop clicks no longer close the dialog. Default `true`. */\n dismissible?: boolean | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */\nfunction Root({ dismissible = true, onOpenChange, open, defaultOpen, children }: DialogRootProps) {\n return (\n <BaseDialog.Root\n open={open}\n defaultOpen={defaultOpen}\n disablePointerDismissal={!dismissible}\n onOpenChange={(next, details) => {\n if (\n !dismissible &&\n !next &&\n (details.reason === 'escape-key' || details.reason === 'outside-press')\n ) {\n details.cancel();\n return;\n }\n onOpenChange?.(next);\n }}\n >\n {children}\n </BaseDialog.Root>\n );\n}\n\n/** Opens the dialog. Pass the Button through `render`: `<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>`. */\nconst Trigger = BaseDialog.Trigger;\n\nexport interface DialogContentProps extends Omit<BaseDialog.Popup.Props, 'className'> {\n /** `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely. */\n size?: DialogSize | undefined;\n className?: string | undefined;\n}\n\n/** Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close. */\nfunction Content({ size = 'md', className, children, ...rest }: DialogContentProps) {\n return (\n <BaseDialog.Portal>\n <BaseDialog.Backdrop className=\"sc-dialog__backdrop\" />\n <BaseDialog.Popup\n className={cx('sc-dialog__popup', className)}\n data-size={size}\n aria-modal=\"true\"\n {...rest}\n >\n {children}\n </BaseDialog.Popup>\n </BaseDialog.Portal>\n );\n}\n\nexport interface DialogTitleProps extends Omit<BaseDialog.Title.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** Required. Labels the dialog; a question or a statement. Renders an `<h2>`. */\nfunction Title({ className, ...rest }: DialogTitleProps) {\n return <BaseDialog.Title className={cx('sc-dialog__title', className)} {...rest} />;\n}\n\nexport interface DialogDescriptionProps extends Omit<BaseDialog.Description.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** Optional, muted. Says what will happen. */\nfunction Description({ className, ...rest }: DialogDescriptionProps) {\n return <BaseDialog.Description className={cx('sc-dialog__description', className)} {...rest} />;\n}\n\nexport type DialogBodyProps = ComponentPropsWithRef<'div'>;\n\n/** Free content between the description and the actions. */\nfunction Body({ className, ...rest }: DialogBodyProps) {\n return <div className={cx('sc-dialog__body', className)} {...rest} />;\n}\n\nexport type DialogActionsProps = Omit<InlineProps, 'justify'>;\n\n/** Right-aligned row of Buttons. Put the confirming action last. */\nfunction Actions({ className, ...rest }: DialogActionsProps) {\n return <Inline justify=\"end\" className={cx('sc-dialog__actions', className)} {...rest} />;\n}\n\nexport interface DialogCloseProps extends Omit<BaseDialog.Close.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** With no children or `render`, the × in the corner. Otherwise wraps any Button: `<Dialog.Close render={<Button variant=\"secondary\" />}>Cancel</Dialog.Close>`. */\nfunction Close({ className, children, render, ...rest }: DialogCloseProps) {\n if (children === undefined && render === undefined) {\n return (\n <BaseDialog.Close className={cx('sc-dialog__close', className)} aria-label=\"Close\" {...rest}>\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.75\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </BaseDialog.Close>\n );\n }\n return (\n <BaseDialog.Close className={className} render={render} {...rest}>\n {children}\n </BaseDialog.Close>\n );\n}\n\n/** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */\nexport const Dialog = { Root, Trigger, Content, Title, Description, Body, Actions, Close };\n","export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './components/Button/Button';\nexport {\n Badge,\n type BadgeProps,\n type BadgeSize,\n type BadgeTone,\n type BadgeVariant,\n} from './components/Badge/Badge';\nexport {\n Card,\n type CardElement,\n type CardPadding,\n type CardProps,\n type CardVariant,\n} from './components/Card/Card';\nexport {\n Stack,\n type StackAlign,\n type StackElement,\n type StackJustify,\n type StackProps,\n} from './components/Stack/Stack';\nexport {\n Inline,\n type InlineAlign,\n type InlineElement,\n type InlineJustify,\n type InlineProps,\n} from './components/Inline/Inline';\nexport { Kbd, type KbdGroupProps, type KbdProps } from './components/Kbd/Kbd';\nexport {\n Dialog,\n type DialogActionsProps,\n type DialogBodyProps,\n type DialogCloseProps,\n type DialogContentProps,\n type DialogDescriptionProps,\n type DialogRootProps,\n type DialogSize,\n type DialogTitleProps,\n} from './components/Dialog/Dialog';\nexport type { SpacingSize } from './types';\nexport const version = '0.1.0';\n"]}
1
+ {"version":3,"sources":["../src/utils/cx.ts","../src/components/Button/Button.tsx","../src/components/Badge/Badge.tsx","../src/components/Card/Card.tsx","../src/components/Stack/Stack.tsx","../src/components/Inline/Inline.tsx","../src/components/Kbd/Kbd.tsx","../src/components/Dialog/Dialog.tsx","../src/index.ts"],"sourcesContent":["/** Joins class names, dropping falsy entries. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n return parts.filter(Boolean).join(' ');\n}\n","import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends ComponentPropsWithRef<'button'> {\n /** `primary` for the one main action in a view, `secondary` for the rest, `ghost` in toolbars and rows, `danger` for destructive confirmations. */\n variant?: ButtonVariant | undefined;\n /** 32, 40 or 48px tall. Compact density shrinks each by one step. */\n size?: ButtonSize | undefined;\n /** A 16px icon before the label. */\n iconStart?: ReactNode | undefined;\n /** A 16px icon after the label. */\n iconEnd?: ReactNode | undefined;\n /** Keeps the width, hides the label, shows a spinner, sets `aria-busy` and ignores clicks. */\n loading?: boolean | undefined;\n /** Stretches to the container. */\n fullWidth?: boolean | undefined;\n}\n\n/** The one way to trigger an action. Renders a native `<button>`; `type` defaults to `button`. */\nexport function Button({\n variant = 'primary',\n size = 'md',\n iconStart,\n iconEnd,\n loading = false,\n fullWidth = false,\n type = 'button',\n className,\n children,\n onClick,\n ...rest\n}: ButtonProps) {\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n };\n return (\n <button\n type={type}\n className={cx('sc-button', className)}\n data-variant={variant}\n data-size={size}\n data-loading={loading || undefined}\n data-full-width={fullWidth || undefined}\n aria-busy={loading || undefined}\n onClick={handleClick}\n {...rest}\n >\n {iconStart ? (\n <span className=\"sc-button__icon\" aria-hidden=\"true\">\n {iconStart}\n </span>\n ) : null}\n <span className=\"sc-button__label\">{children}</span>\n {iconEnd ? (\n <span className=\"sc-button__icon\" aria-hidden=\"true\">\n {iconEnd}\n </span>\n ) : null}\n {loading ? <span className=\"sc-button__spinner\" aria-hidden=\"true\" /> : null}\n </button>\n );\n}\n","import type { ComponentPropsWithRef } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';\nexport type BadgeVariant = 'soft' | 'solid' | 'outline';\nexport type BadgeSize = 'sm' | 'md';\n\nexport interface BadgeProps extends ComponentPropsWithRef<'span'> {\n /** Color reinforces the status; the word is the status. */\n tone?: BadgeTone | undefined;\n /** `soft` tinted fill (default), `solid` filled, `outline` hairline. */\n variant?: BadgeVariant | undefined;\n /** `md` 24px (default) or `sm` 20px for table rows and Card headers. */\n size?: BadgeSize | undefined;\n /** A 6px dot before the label for scannable lists. */\n dot?: boolean | undefined;\n}\n\n/** One or two words of status beside a thing. Text only; never clickable. */\nexport function Badge({\n tone = 'neutral',\n variant = 'soft',\n size = 'md',\n dot = false,\n className,\n children,\n ...rest\n}: BadgeProps) {\n return (\n <span\n className={cx('sc-badge', className)}\n data-tone={tone}\n data-variant={variant}\n data-size={size}\n {...rest}\n >\n {dot ? <span className=\"sc-badge__dot\" aria-hidden=\"true\" /> : null}\n {children}\n </span>\n );\n}\n","import { useRender } from '@base-ui/react/use-render';\nimport { cx } from '../../utils/cx';\n\nexport type CardVariant = 'outlined' | 'elevated' | 'filled';\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\nexport type CardElement = 'div' | 'article' | 'section' | 'li' | 'a' | 'button';\n\nexport interface CardProps extends useRender.ComponentProps<'div'> {\n /** `outlined` hairline (default), `elevated` floats, `filled` is an inset region. */\n variant?: CardVariant | undefined;\n /** `none`, `sm` 12px, `md` 16px (default), `lg` 24px. */\n padding?: CardPadding | undefined;\n /** Hover lifts the card and the whole card is the target. Render it as `a` or `button` so it is a real control. */\n interactive?: boolean | undefined;\n /** Accent border with a 1px inset, for the active row or chosen option. */\n selected?: boolean | undefined;\n /** Element to render when `render` is not given. */\n as?: CardElement | undefined;\n}\n\n/** A bordered surface that groups related content. Compose the inside with Stack and Inline. */\nexport function Card({\n variant = 'outlined',\n padding = 'md',\n interactive = false,\n selected = false,\n as = 'div',\n render,\n className,\n ref,\n ...rest\n}: CardProps) {\n return useRender({\n render,\n ref,\n defaultTagName: as,\n props: {\n className: cx('sc-card', className),\n 'data-variant': variant,\n 'data-padding': padding,\n 'data-interactive': interactive || undefined,\n 'data-selected': selected || undefined,\n ...rest,\n },\n });\n}\n","import { createElement, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport type { SpacingSize } from '../../types';\nimport { cx } from '../../utils/cx';\n\nexport type StackAlign = 'stretch' | 'start' | 'center' | 'end';\nexport type StackJustify = 'start' | 'center' | 'end' | 'between';\nexport type StackElement = 'div' | 'section' | 'ul' | 'ol' | 'nav' | 'form';\n\nexport interface StackProps extends ComponentPropsWithRef<'div'> {\n /** Gap from the spacing scale. Default `sm` (12px). */\n gap?: SpacingSize | undefined;\n /** Cross-axis alignment. Default `stretch`. */\n align?: StackAlign | undefined;\n /** Main-axis distribution. Default `start`. */\n justify?: StackJustify | undefined;\n /** Element to render. Use `ul`/`ol` for lists so semantics survive the layout. */\n as?: StackElement | undefined;\n /** Lays out as `inline-flex`. */\n inline?: boolean | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Vertical flex layout with a token gap. The only way children should be spaced vertically. */\nexport function Stack({\n gap = 'sm',\n align = 'stretch',\n justify = 'start',\n as = 'div',\n inline = false,\n className,\n ...rest\n}: StackProps) {\n return createElement(as, {\n className: cx('sc-stack', className),\n 'data-gap': gap,\n 'data-align': align,\n 'data-justify': justify,\n 'data-inline': inline || undefined,\n ...rest,\n });\n}\n","import { createElement, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport type { SpacingSize } from '../../types';\nimport { cx } from '../../utils/cx';\n\nexport type InlineAlign = 'center' | 'start' | 'end' | 'baseline' | 'stretch';\nexport type InlineJustify = 'start' | 'center' | 'end' | 'between';\nexport type InlineElement = 'div' | 'span' | 'ul' | 'nav';\n\nexport interface InlineProps extends ComponentPropsWithRef<'div'> {\n /** Gap from the spacing scale. Default `xs` (8px). */\n gap?: SpacingSize | undefined;\n /** Cross-axis alignment. Default `center`; use `baseline` when mixing text sizes. */\n align?: InlineAlign | undefined;\n /** Main-axis distribution. Default `start`. */\n justify?: InlineJustify | undefined;\n /** Wraps by default; `false` for toolbars that scroll. */\n wrap?: boolean | undefined;\n /** Element to render. */\n as?: InlineElement | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Horizontal flex layout that wraps. For rows of buttons, badges, metadata and key combinations. */\nexport function Inline({\n gap = 'xs',\n align = 'center',\n justify = 'start',\n wrap = true,\n as = 'div',\n className,\n ...rest\n}: InlineProps) {\n return createElement(as, {\n className: cx('sc-inline', className),\n 'data-gap': gap,\n 'data-align': align,\n 'data-justify': justify,\n 'data-nowrap': wrap ? undefined : '',\n ...rest,\n });\n}\n","import { Children, Fragment, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type KbdProps = ComponentPropsWithRef<'kbd'>;\n\n/** A single key, rendered like a keycap. One Kbd per key; group keys with `Kbd.Group`. */\nfunction KbdBase({ className, ...rest }: KbdProps) {\n return <kbd className={cx('sc-kbd', className)} {...rest} />;\n}\n\nexport interface KbdGroupProps extends ComponentPropsWithRef<'span'> {\n /** The readable combination, announced instead of the symbols: \"Command K\". */\n label: string;\n /** `plus` (default) draws a muted + between keys; `space` leaves a gap. */\n separator?: 'plus' | 'space' | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Groups the keys of one shortcut. */\nfunction KbdGroup({ label, separator = 'plus', className, children, ...rest }: KbdGroupProps) {\n const keys = Children.toArray(children);\n return (\n <span role=\"group\" aria-label={label} className={cx('sc-kbd-group', className)} {...rest}>\n {keys.map((key, i) => (\n <Fragment key={i}>\n {i > 0 && separator === 'plus' ? (\n <span className=\"sc-kbd-group__sep\" aria-hidden=\"true\">\n +\n </span>\n ) : null}\n {key}\n </Fragment>\n ))}\n </span>\n );\n}\n\nexport const Kbd = Object.assign(KbdBase, { Group: KbdGroup });\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { Inline, type InlineProps } from '../Inline/Inline';\nimport { cx } from '../../utils/cx';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\n\nexport interface DialogRootProps {\n /** Controlled open state. */\n open?: boolean | undefined;\n /** Initial open state when uncontrolled. */\n defaultOpen?: boolean | undefined;\n /** Called when the dialog opens or closes. */\n onOpenChange?: ((open: boolean) => void) | undefined;\n /** When `false`, Esc and backdrop clicks no longer close the dialog. Default `true`. */\n dismissible?: boolean | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */\nfunction Root({ dismissible = true, onOpenChange, open, defaultOpen, children }: DialogRootProps) {\n return (\n <BaseDialog.Root\n open={open}\n defaultOpen={defaultOpen}\n disablePointerDismissal={!dismissible}\n onOpenChange={(next, details) => {\n if (\n !dismissible &&\n !next &&\n (details.reason === 'escape-key' || details.reason === 'outside-press')\n ) {\n details.cancel();\n return;\n }\n onOpenChange?.(next);\n }}\n >\n {children}\n </BaseDialog.Root>\n );\n}\n\n/** Opens the dialog. Pass the Button through `render`: `<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>`. */\nconst Trigger = BaseDialog.Trigger;\n\nexport interface DialogContentProps extends Omit<BaseDialog.Popup.Props, 'className'> {\n /** `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely. */\n size?: DialogSize | undefined;\n className?: string | undefined;\n}\n\n/** Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close. */\nfunction Content({ size = 'md', className, children, ...rest }: DialogContentProps) {\n return (\n <BaseDialog.Portal>\n <BaseDialog.Backdrop className=\"sc-dialog__backdrop\" />\n <BaseDialog.Popup\n className={cx('sc-dialog__popup', className)}\n data-size={size}\n aria-modal=\"true\"\n {...rest}\n >\n {children}\n </BaseDialog.Popup>\n </BaseDialog.Portal>\n );\n}\n\nexport interface DialogTitleProps extends Omit<BaseDialog.Title.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** Required. Labels the dialog; a question or a statement. Renders an `<h2>`. */\nfunction Title({ className, ...rest }: DialogTitleProps) {\n return <BaseDialog.Title className={cx('sc-dialog__title', className)} {...rest} />;\n}\n\nexport interface DialogDescriptionProps extends Omit<BaseDialog.Description.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** Optional, muted. Says what will happen. */\nfunction Description({ className, ...rest }: DialogDescriptionProps) {\n return <BaseDialog.Description className={cx('sc-dialog__description', className)} {...rest} />;\n}\n\nexport type DialogBodyProps = ComponentPropsWithRef<'div'>;\n\n/** Free content between the description and the actions. */\nfunction Body({ className, ...rest }: DialogBodyProps) {\n return <div className={cx('sc-dialog__body', className)} {...rest} />;\n}\n\nexport type DialogActionsProps = Omit<InlineProps, 'justify'>;\n\n/** Right-aligned row of Buttons. Put the confirming action last. */\nfunction Actions({ className, ...rest }: DialogActionsProps) {\n return <Inline justify=\"end\" className={cx('sc-dialog__actions', className)} {...rest} />;\n}\n\nexport interface DialogCloseProps extends Omit<BaseDialog.Close.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** With no children or `render`, the × in the corner. Otherwise wraps any Button: `<Dialog.Close render={<Button variant=\"secondary\" />}>Cancel</Dialog.Close>`. */\nfunction Close({ className, children, render, ...rest }: DialogCloseProps) {\n if (children === undefined && render === undefined) {\n return (\n <BaseDialog.Close className={cx('sc-dialog__close', className)} aria-label=\"Close\" {...rest}>\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.75\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </BaseDialog.Close>\n );\n }\n return (\n <BaseDialog.Close className={className} render={render} {...rest}>\n {children}\n </BaseDialog.Close>\n );\n}\n\n/** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */\nexport const Dialog = { Root, Trigger, Content, Title, Description, Body, Actions, Close };\n","export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './components/Button/Button';\nexport {\n Badge,\n type BadgeProps,\n type BadgeSize,\n type BadgeTone,\n type BadgeVariant,\n} from './components/Badge/Badge';\nexport {\n Card,\n type CardElement,\n type CardPadding,\n type CardProps,\n type CardVariant,\n} from './components/Card/Card';\nexport {\n Stack,\n type StackAlign,\n type StackElement,\n type StackJustify,\n type StackProps,\n} from './components/Stack/Stack';\nexport {\n Inline,\n type InlineAlign,\n type InlineElement,\n type InlineJustify,\n type InlineProps,\n} from './components/Inline/Inline';\nexport { Kbd, type KbdGroupProps, type KbdProps } from './components/Kbd/Kbd';\nexport {\n Dialog,\n type DialogActionsProps,\n type DialogBodyProps,\n type DialogCloseProps,\n type DialogContentProps,\n type DialogDescriptionProps,\n type DialogRootProps,\n type DialogSize,\n type DialogTitleProps,\n} from './components/Dialog/Dialog';\nexport type { SpacingSize } from './types';\nexport const version = '0.1.1';\n"],"mappings":"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","names":["jsx","jsxs","createElement","createElement","jsx","jsxs","jsx","jsxs"]}
package/dist/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @salemcobalt/ui 0.1.0 — requires @salemcobalt/tokens/css. */
1
+ /* @salemcobalt/ui 0.1.1 — requires @salemcobalt/tokens/css. */
2
2
  @layer sc {
3
3
  /* ---- base.css ---- */
4
4
  /* Shared: focus ring, reduced motion. Component files follow. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salemcobalt/ui",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "React components for the Salem Cobalt design system: Button, Badge, Card, Stack, Inline, Kbd, Dialog.",
5
5
  "license": "MIT",
6
6
  "repository": {