@asnewyla/button-group 0.1.1 → 0.2.0

package/README.md

@@ -1,28 +1,52 @@
-# @asnewyla/button-group
-
-Groups `@asnewyla/button` components visually (`role="group"`) and propagates
-`variant`, `size`, and `disabled` to every child via context. Any child can
-override an individual prop.
-
-## Install
-
-```bash
-npm install @asnewyla/button-group
-```
-
-## Usage
-
-```tsx
-import { Button } from '@asnewyla/button';
-import { ButtonGroup } from '@asnewyla/button-group';
-
-<ButtonGroup variant="secondary" aria-label="Text alignment">
-  <Button>Left</Button>
-  <Button>Center</Button>
-  <Button variant="destructive">Right</Button> {/* overrides the group */}
-</ButtonGroup>
-```
-
-## License
-
-MIT
+# @asnewyla/button-group
+
+Groups `@asnewyla/button` components visually (`role="group"`) and propagates
+`variant`, `size`, and `disabled` to every child via context. Any child can
+override an individual prop.
+
+## Install
+
+```bash
+npm install @asnewyla/button-group
+```
+
+## Usage
+
+```tsx
+import '@asnewyla/button/styles.css';
+import '@asnewyla/button-group/styles.css';
+import { Button } from '@asnewyla/button';
+import { ButtonGroup } from '@asnewyla/button-group';
+
+<ButtonGroup variant="secondary" aria-label="Text alignment">
+  <Button>Left</Button>
+  <Button>Center</Button>
+  <Button variant="destructive">Right</Button> {/* overrides the group */}
+</ButtonGroup>
+```
+
+### Layout
+
+`styles.css` lays the buttons out in a wrapping row. `gap` sets the space
+between them, on the same scale as `Stack`/`Group`. Without the stylesheet,
+the buttons render inline with no gap. `className` is merged with the
+`xd-button-group` class.
+
+```tsx
+<ButtonGroup gap="md" aria-label="Actions">…</ButtonGroup>
+```
+
+### Props
+
+Every native `<div>` prop, plus:
+
+| Prop | Type | Default |
+|---|---|---|
+| `variant` | `ButtonVariant` | — (each button's own) |
+| `size` | `'sm' \| 'md' \| 'lg'` | — (each button's own) |
+| `disabled` | `boolean` | — |
+| `gap` | `'sm' \| 'md' \| 'lg'` (`--xd-space-sm/md/lg`) | `'sm'` |
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1,14 @@
+/* src/components/ButtonGroup.css */
+.xd-button-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--xd-space-sm, 0.375rem);
+}
+.xd-button-group[data-gap=md] {
+  gap: var(--xd-space-md, 0.5rem);
+}
+.xd-button-group[data-gap=lg] {
+  gap: var(--xd-space-lg, 0.75rem);
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonGroup.css"],"sourcesContent":[".xd-button-group {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--xd-space-sm, 0.375rem);\n}\n\n.xd-button-group[data-gap=\"md\"] {\n  gap: var(--xd-space-md, 0.5rem);\n}\n\n.xd-button-group[data-gap=\"lg\"] {\n  gap: var(--xd-space-lg, 0.75rem);\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,aAAW;AACX,eAAa;AACb,OAAK,IAAI,aAAa,EAAE;AAC1B;AAEA,CAPC,eAOe,CAAC;AACf,OAAK,IAAI,aAAa,EAAE;AAC1B;AAEA,CAXC,eAWe,CAAC;AACf,OAAK,IAAI,aAAa,EAAE;AAC1B;","names":[]}

package/dist/index.d.mts

@@ -6,6 +6,8 @@ declare const ButtonGroup: react.ForwardRefExoticComponent<Omit<Omit<react.Detai
     variant?: ButtonVariant;
     size?: ButtonSize;
     disabled?: boolean;
+    /** Space between buttons, on the same scale as `Stack`/`Group`. */
+    gap?: "sm" | "md" | "lg";
     children: ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -6,6 +6,8 @@ declare const ButtonGroup: react.ForwardRefExoticComponent<Omit<Omit<react.Detai
     variant?: ButtonVariant;
     size?: ButtonSize;
     disabled?: boolean;
+    /** Space between buttons, on the same scale as `Stack`/`Group`. */
+    gap?: "sm" | "md" | "lg";
     children: ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -5,10 +5,28 @@ var button = require('@asnewyla/button');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/ButtonGroup.tsx
-function ButtonGroupInner({ children, variant, size, disabled, ...restProps }, ref) {
+function ButtonGroupInner({
+  children,
+  variant,
+  size,
+  disabled,
+  gap = "sm",
+  className,
+  ...restProps
+}, ref) {
   return (
     // biome-ignore lint/a11y/useSemanticElements: role="group" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "group", ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(button.ButtonGroupProvider, { value: { variant, size, disabled }, children }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        ...restProps,
+        "data-gap": gap,
+        className: className ? `xd-button-group ${className}` : "xd-button-group",
+        children: /* @__PURE__ */ jsxRuntime.jsx(button.ButtonGroupProvider, { value: { variant, size, disabled }, children })
+      }
+    )
   );
 }
 var ButtonGroup = react.forwardRef(ButtonGroupInner);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ButtonGroup.tsx"],"names":["jsx","ButtonGroupProvider","forwardRef"],"mappings":";;;;;;;AAmBA,SAAS,gBAAA,CACP,EAAE,QAAA,EAAU,OAAA,EAAS,MAAM,QAAA,EAAU,GAAG,SAAA,EAAU,EAClD,GAAA,EACA;AACA,EAAA;AAAA;AAAA,mCAEG,KAAA,EAAA,EAAI,GAAA,EAAU,IAAA,EAAK,OAAA,EAAS,GAAG,SAAA,EAC9B,QAAA,kBAAAA,cAAA,CAACC,0BAAA,EAAA,EAAoB,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,QAAA,EAAS,EACnD,UACH,CAAA,EACF;AAAA;AAEJ;AAEO,IAAM,WAAA,GAAcC,iBAAW,gBAAgB","file":"index.js","sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type ReactNode,\n} from 'react';\nimport {\n  ButtonGroupProvider,\n  type ButtonVariant,\n  type ButtonSize,\n} from '@asnewyla/button';\n\nexport type ButtonGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'role'> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n  children: ReactNode;\n};\n\nfunction ButtonGroupInner(\n  { children, variant, size, disabled, ...restProps }: ButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: role=\"group\" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.\n    <div ref={ref} role=\"group\" {...restProps}>\n      <ButtonGroupProvider value={{ variant, size, disabled }}>\n        {children}\n      </ButtonGroupProvider>\n    </div>\n  );\n}\n\nexport const ButtonGroup = forwardRef(ButtonGroupInner);\n"]}
+{"version":3,"sources":["../src/components/ButtonGroup.tsx"],"names":["jsx","ButtonGroupProvider","forwardRef"],"mappings":";;;;;;;AAsBA,SAAS,gBAAA,CACP;AAAA,EACE,QAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA,GAAM,IAAA;AAAA,EACN,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA;AAAA;AAAA,oBAEEA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACJ,GAAG,SAAA;AAAA,QACJ,UAAA,EAAU,GAAA;AAAA,QACV,SAAA,EAAW,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK,iBAAA;AAAA,QAExD,QAAA,kBAAAA,cAAA,CAACC,8BAAoB,KAAA,EAAO,EAAE,SAAS,IAAA,EAAM,QAAA,IAC1C,QAAA,EACH;AAAA;AAAA;AACF;AAEJ;AAEO,IAAM,WAAA,GAAcC,iBAAW,gBAAgB","file":"index.js","sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type ReactNode,\n} from 'react';\nimport {\n  ButtonGroupProvider,\n  type ButtonVariant,\n  type ButtonSize,\n} from '@asnewyla/button';\nimport './ButtonGroup.css';\n\nexport type ButtonGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'role'> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n  /** Space between buttons, on the same scale as `Stack`/`Group`. */\n  gap?: 'sm' | 'md' | 'lg';\n  children: ReactNode;\n};\n\nfunction ButtonGroupInner(\n  {\n    children,\n    variant,\n    size,\n    disabled,\n    gap = 'sm',\n    className,\n    ...restProps\n  }: ButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: role=\"group\" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.\n    <div\n      ref={ref}\n      role=\"group\"\n      {...restProps}\n      data-gap={gap}\n      className={className ? `xd-button-group ${className}` : 'xd-button-group'}\n    >\n      <ButtonGroupProvider value={{ variant, size, disabled }}>\n        {children}\n      </ButtonGroupProvider>\n    </div>\n  );\n}\n\nexport const ButtonGroup = forwardRef(ButtonGroupInner);\n"]}

package/dist/index.mjs

@@ -3,10 +3,28 @@ import { ButtonGroupProvider } from '@asnewyla/button';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/ButtonGroup.tsx
-function ButtonGroupInner({ children, variant, size, disabled, ...restProps }, ref) {
+function ButtonGroupInner({
+  children,
+  variant,
+  size,
+  disabled,
+  gap = "sm",
+  className,
+  ...restProps
+}, ref) {
   return (
     // biome-ignore lint/a11y/useSemanticElements: role="group" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.
-    /* @__PURE__ */ jsx("div", { ref, role: "group", ...restProps, children: /* @__PURE__ */ jsx(ButtonGroupProvider, { value: { variant, size, disabled }, children }) })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        ...restProps,
+        "data-gap": gap,
+        className: className ? `xd-button-group ${className}` : "xd-button-group",
+        children: /* @__PURE__ */ jsx(ButtonGroupProvider, { value: { variant, size, disabled }, children })
+      }
+    )
   );
 }
 var ButtonGroup = forwardRef(ButtonGroupInner);

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ButtonGroup.tsx"],"names":[],"mappings":";;;;;AAmBA,SAAS,gBAAA,CACP,EAAE,QAAA,EAAU,OAAA,EAAS,MAAM,QAAA,EAAU,GAAG,SAAA,EAAU,EAClD,GAAA,EACA;AACA,EAAA;AAAA;AAAA,wBAEG,KAAA,EAAA,EAAI,GAAA,EAAU,IAAA,EAAK,OAAA,EAAS,GAAG,SAAA,EAC9B,QAAA,kBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,QAAA,EAAS,EACnD,UACH,CAAA,EACF;AAAA;AAEJ;AAEO,IAAM,WAAA,GAAc,WAAW,gBAAgB","file":"index.mjs","sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type ReactNode,\n} from 'react';\nimport {\n  ButtonGroupProvider,\n  type ButtonVariant,\n  type ButtonSize,\n} from '@asnewyla/button';\n\nexport type ButtonGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'role'> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n  children: ReactNode;\n};\n\nfunction ButtonGroupInner(\n  { children, variant, size, disabled, ...restProps }: ButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: role=\"group\" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.\n    <div ref={ref} role=\"group\" {...restProps}>\n      <ButtonGroupProvider value={{ variant, size, disabled }}>\n        {children}\n      </ButtonGroupProvider>\n    </div>\n  );\n}\n\nexport const ButtonGroup = forwardRef(ButtonGroupInner);\n"]}
+{"version":3,"sources":["../src/components/ButtonGroup.tsx"],"names":[],"mappings":";;;;;AAsBA,SAAS,gBAAA,CACP;AAAA,EACE,QAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA,GAAM,IAAA;AAAA,EACN,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA;AAAA;AAAA,oBAEE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACJ,GAAG,SAAA;AAAA,QACJ,UAAA,EAAU,GAAA;AAAA,QACV,SAAA,EAAW,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK,iBAAA;AAAA,QAExD,QAAA,kBAAA,GAAA,CAAC,uBAAoB,KAAA,EAAO,EAAE,SAAS,IAAA,EAAM,QAAA,IAC1C,QAAA,EACH;AAAA;AAAA;AACF;AAEJ;AAEO,IAAM,WAAA,GAAc,WAAW,gBAAgB","file":"index.mjs","sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type ReactNode,\n} from 'react';\nimport {\n  ButtonGroupProvider,\n  type ButtonVariant,\n  type ButtonSize,\n} from '@asnewyla/button';\nimport './ButtonGroup.css';\n\nexport type ButtonGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'role'> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n  /** Space between buttons, on the same scale as `Stack`/`Group`. */\n  gap?: 'sm' | 'md' | 'lg';\n  children: ReactNode;\n};\n\nfunction ButtonGroupInner(\n  {\n    children,\n    variant,\n    size,\n    disabled,\n    gap = 'sm',\n    className,\n    ...restProps\n  }: ButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: role=\"group\" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.\n    <div\n      ref={ref}\n      role=\"group\"\n      {...restProps}\n      data-gap={gap}\n      className={className ? `xd-button-group ${className}` : 'xd-button-group'}\n    >\n      <ButtonGroupProvider value={{ variant, size, disabled }}>\n        {children}\n      </ButtonGroupProvider>\n    </div>\n  );\n}\n\nexport const ButtonGroup = forwardRef(ButtonGroupInner);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asnewyla/button-group",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Groups buttons visually and propagates shared props via context",
   "license": "MIT",
   "repository": {
@@ -16,15 +16,18 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/index.css"
   },
   "files": [
     "dist"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "keywords": [
     "react",
     "button-group",
@@ -36,7 +39,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@asnewyla/button": "0.2.0"
+    "@asnewyla/button": "0.3.0"
   },
   "devDependencies": {
     "react": "^18.3.0",