@ladder-ui/button-group 0.2.0
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/button-group.css +31 -0
- package/dist/button-group.d.ts +10 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +11 -0
- package/dist/index.mjs +9 -0
- package/package.json +67 -0
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.lui-button-group {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: stretch;
|
|
5
|
+
}
|
|
6
|
+
.lui-button-group > .lui-button:focus-visible {
|
|
7
|
+
position: relative;
|
|
8
|
+
z-index: 1;
|
|
9
|
+
}
|
|
10
|
+
.lui-button-group:not(.lui-button-group--vertical) > .lui-button:not(:last-child) {
|
|
11
|
+
border-start-end-radius: 0;
|
|
12
|
+
border-end-end-radius: 0;
|
|
13
|
+
}
|
|
14
|
+
.lui-button-group:not(.lui-button-group--vertical) > .lui-button:not(:first-child) {
|
|
15
|
+
border-start-start-radius: 0;
|
|
16
|
+
border-end-start-radius: 0;
|
|
17
|
+
border-inline-start: none;
|
|
18
|
+
}
|
|
19
|
+
.lui-button-group--vertical {
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
}
|
|
22
|
+
.lui-button-group--vertical > .lui-button:not(:last-child) {
|
|
23
|
+
border-end-start-radius: 0;
|
|
24
|
+
border-end-end-radius: 0;
|
|
25
|
+
}
|
|
26
|
+
.lui-button-group--vertical > .lui-button:not(:first-child) {
|
|
27
|
+
border-start-start-radius: 0;
|
|
28
|
+
border-start-end-radius: 0;
|
|
29
|
+
border-block-start: none;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Ref } from "react";
|
|
2
|
+
export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
ref?: Ref<HTMLDivElement>;
|
|
4
|
+
/** Layout direction of the grouped buttons */
|
|
5
|
+
orientation?: "horizontal" | "vertical";
|
|
6
|
+
}
|
|
7
|
+
export declare function ButtonGroup({ ref, className, orientation, children, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare namespace ButtonGroup {
|
|
9
|
+
var displayName: string;
|
|
10
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ButtonGroup, type ButtonGroupProps } from './button-group';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var concatClassNames = require('@ladder-ui/core/concatClassNames');
|
|
5
|
+
|
|
6
|
+
function ButtonGroup({ ref, className, orientation = "horizontal", children, ...props }) {
|
|
7
|
+
return (jsxRuntime.jsx("div", { ref: ref, role: "group", className: concatClassNames("lui-button-group", orientation === "vertical" && "lui-button-group--vertical", className), ...props, children: children }));
|
|
8
|
+
}
|
|
9
|
+
ButtonGroup.displayName = "ButtonGroup";
|
|
10
|
+
|
|
11
|
+
exports.ButtonGroup = ButtonGroup;
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import concatClassNames from '@ladder-ui/core/concatClassNames';
|
|
3
|
+
|
|
4
|
+
function ButtonGroup({ ref, className, orientation = "horizontal", children, ...props }) {
|
|
5
|
+
return (jsx("div", { ref: ref, role: "group", className: concatClassNames("lui-button-group", orientation === "vertical" && "lui-button-group--vertical", className), ...props, children: children }));
|
|
6
|
+
}
|
|
7
|
+
ButtonGroup.displayName = "ButtonGroup";
|
|
8
|
+
|
|
9
|
+
export { ButtonGroup };
|
package/package.json
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ladder-ui/button-group",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"require": "./dist/index.js",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"types": "./dist/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./*.css": "./dist/*.css",
|
|
15
|
+
"./styles/*.css": "./dist/*.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"keywords": [
|
|
21
|
+
"nodejs",
|
|
22
|
+
"react",
|
|
23
|
+
"ui",
|
|
24
|
+
"components",
|
|
25
|
+
"library"
|
|
26
|
+
],
|
|
27
|
+
"author": "Ivan Avila <ivelaval@gmail.com> - https://www.vennet.dev",
|
|
28
|
+
"license": "ISC",
|
|
29
|
+
"repository": {
|
|
30
|
+
"type": "git",
|
|
31
|
+
"url": "git+ssh://git@github.com/ivelaval/ladder-ui.git"
|
|
32
|
+
},
|
|
33
|
+
"bugs": {
|
|
34
|
+
"url": "https://github.com/ivelaval/ladder-ui/issues"
|
|
35
|
+
},
|
|
36
|
+
"homepage": "https://github.com/ivelaval/ladder-ui#readme",
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
|
42
|
+
"@types/react": "^18.2.48",
|
|
43
|
+
"rollup": "^4.59.0",
|
|
44
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
45
|
+
"sass": "^1.90.0",
|
|
46
|
+
"tslib": "^2.6.2",
|
|
47
|
+
"typescript": "^5.3.3",
|
|
48
|
+
"@ladder-ui/button": "0.2.0",
|
|
49
|
+
"@ladder-ui/core": "0.2.0"
|
|
50
|
+
},
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"@ladder-ui/button": ">=0.0.0",
|
|
53
|
+
"@ladder-ui/core": ">=0.0.0",
|
|
54
|
+
"react": ">=18.0.0"
|
|
55
|
+
},
|
|
56
|
+
"sideEffects": [
|
|
57
|
+
"**/*.css"
|
|
58
|
+
],
|
|
59
|
+
"scripts": {
|
|
60
|
+
"build": "pnpm clean && rollup -c",
|
|
61
|
+
"dev": "rollup -c -w",
|
|
62
|
+
"test": "vitest run",
|
|
63
|
+
"test:watch": "vitest",
|
|
64
|
+
"type-check": "tsc --noEmit",
|
|
65
|
+
"clean": "rm -rf dist"
|
|
66
|
+
}
|
|
67
|
+
}
|