@aortl/admin-react 0.5.2 → 0.6.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/Card.d.ts CHANGED
@@ -18,6 +18,8 @@ export interface CardProps extends Omit<ComponentProps<"div">, "title"> {
18
18
  title?: ReactNode;
19
19
  /** Renders as `<Card.Description>`. */
20
20
  description?: ReactNode;
21
+ /** Trailing header controls (close, edit, …). Renders as `<Card.Toolbar>`. */
22
+ toolbar?: ReactNode;
21
23
  /** Renders as `<Card.Actions>`. */
22
24
  actions?: ReactNode;
23
25
  }
@@ -26,9 +28,13 @@ export interface CardProps extends Omit<ComponentProps<"div">, "title"> {
26
28
  * an optional title (with icon), description, children, and actions. For
27
29
  * anything outside that shape, use `<Card.Container>` and compose by hand.
28
30
  */
29
- declare function CardRoot({ bordered, compact, icon, title, description, actions, className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
31
+ declare function CardRoot({ bordered, compact, icon, title, description, toolbar, actions, className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
30
32
  export type CardBodyProps = ComponentProps<"div">;
31
33
  declare function CardBody({ className, ...rest }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
34
+ export type CardHeaderProps = ComponentProps<"div">;
35
+ declare function CardHeader({ className, ...rest }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
36
+ export type CardToolbarProps = ComponentProps<"div">;
37
+ declare function CardToolbar({ className, ...rest }: CardToolbarProps): import("react/jsx-runtime").JSX.Element;
32
38
  export interface CardTitleProps extends ComponentProps<"h3"> {
33
39
  /** Leading icon. */
34
40
  icon?: IconProp;
@@ -41,6 +47,8 @@ declare function CardActions({ className, ...rest }: CardActionsProps): import("
41
47
  export declare const Card: typeof CardRoot & {
42
48
  Container: typeof CardContainer;
43
49
  Body: typeof CardBody;
50
+ Header: typeof CardHeader;
51
+ Toolbar: typeof CardToolbar;
44
52
  Title: typeof CardTitle;
45
53
  Description: typeof CardDescription;
46
54
  Actions: typeof CardActions;
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,2CAOnF;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,2CAYX;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAClD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC1D,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AACD,iBAAS,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAOxE;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AACvD,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAEpE;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,eAAO,MAAM,IAAI;;;;;;CAMf,CAAC"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,2CAOnF;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,2CAoBX;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAClD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACpD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAE1D;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC1D,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AACD,iBAAS,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAOxE;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AACvD,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAEpE;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,eAAO,MAAM,IAAI;;;;;;;;CAQf,CAAC"}
@@ -1,7 +1,5 @@
1
1
  /*! @aortl/admin-css scoped variant — @scope (._ao-admin-root); admin classes prefixed with _ao-. */
2
2
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
3
- @layer properties;
4
- @layer theme, base, components, utilities;
5
3
  @font-face {
6
4
  font-family: "IBM Plex Sans";
7
5
  font-style: normal;
@@ -50,6 +48,26 @@
50
48
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format("woff2");
51
49
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
52
50
  }
51
+ @property --tw-rotate-x {
52
+ syntax: "*";
53
+ inherits: false;
54
+ }
55
+ @property --tw-rotate-y {
56
+ syntax: "*";
57
+ inherits: false;
58
+ }
59
+ @property --tw-rotate-z {
60
+ syntax: "*";
61
+ inherits: false;
62
+ }
63
+ @property --tw-skew-x {
64
+ syntax: "*";
65
+ inherits: false;
66
+ }
67
+ @property --tw-skew-y {
68
+ syntax: "*";
69
+ inherits: false;
70
+ }
53
71
  @property --tw-ordinal {
54
72
  syntax: "*";
55
73
  inherits: false;
@@ -70,6 +88,28 @@
70
88
  syntax: "*";
71
89
  inherits: false;
72
90
  }
91
+ @property --tw-leading {
92
+ syntax: "*";
93
+ inherits: false;
94
+ }
95
+ @property --tw-font-weight {
96
+ syntax: "*";
97
+ inherits: false;
98
+ }
99
+ @property --tw-border-style {
100
+ syntax: "*";
101
+ inherits: false;
102
+ initial-value: solid;
103
+ }
104
+ @property --tw-outline-style {
105
+ syntax: "*";
106
+ inherits: false;
107
+ initial-value: solid;
108
+ }
109
+ @property --tw-duration {
110
+ syntax: "*";
111
+ inherits: false;
112
+ }
73
113
  @property --tw-shadow {
74
114
  syntax: "*";
75
115
  inherits: false;
@@ -135,28 +175,6 @@
135
175
  inherits: false;
136
176
  initial-value: 0 0 #0000;
137
177
  }
138
- @property --tw-leading {
139
- syntax: "*";
140
- inherits: false;
141
- }
142
- @property --tw-font-weight {
143
- syntax: "*";
144
- inherits: false;
145
- }
146
- @property --tw-border-style {
147
- syntax: "*";
148
- inherits: false;
149
- initial-value: solid;
150
- }
151
- @property --tw-outline-style {
152
- syntax: "*";
153
- inherits: false;
154
- initial-value: solid;
155
- }
156
- @property --tw-duration {
157
- syntax: "*";
158
- inherits: false;
159
- }
160
178
  @property --tw-translate-x {
161
179
  syntax: "*";
162
180
  inherits: false;
@@ -177,6 +195,24 @@
177
195
  inherits: false;
178
196
  }
179
197
  @scope (._ao-admin-root) {
198
+ :scope :where(
199
+ h1, h2, h3, h4, h5, h6,
200
+ p, a,
201
+ ul, ol, li, dl, dt, dd,
202
+ blockquote, pre, code,
203
+ button, input, textarea, select, label, fieldset, legend,
204
+ table, thead, tbody, tfoot, tr, th, td
205
+ ) {
206
+ font-family: inherit;
207
+ font-style: inherit;
208
+ font-variant: normal;
209
+ font-weight: inherit;
210
+ color: inherit;
211
+ letter-spacing: normal;
212
+ text-transform: none;
213
+ text-decoration: inherit;
214
+ line-height: inherit;
215
+ }
180
216
  :scope {
181
217
  color-scheme: light dark;
182
218
  }
@@ -188,11 +224,21 @@
188
224
  }
189
225
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
190
226
  :scope, :scope *, :scope::before, :scope ::before, :scope::after, :scope ::after, :scope::backdrop, :scope ::backdrop {
227
+ --tw-rotate-x: initial;
228
+ --tw-rotate-y: initial;
229
+ --tw-rotate-z: initial;
230
+ --tw-skew-x: initial;
231
+ --tw-skew-y: initial;
191
232
  --tw-ordinal: initial;
192
233
  --tw-slashed-zero: initial;
193
234
  --tw-numeric-figure: initial;
194
235
  --tw-numeric-spacing: initial;
195
236
  --tw-numeric-fraction: initial;
237
+ --tw-leading: initial;
238
+ --tw-font-weight: initial;
239
+ --tw-border-style: solid;
240
+ --tw-outline-style: solid;
241
+ --tw-duration: initial;
196
242
  --tw-shadow: 0 0 #0000;
197
243
  --tw-shadow-color: initial;
198
244
  --tw-shadow-alpha: 100%;
@@ -207,11 +253,6 @@
207
253
  --tw-ring-offset-width: 0px;
208
254
  --tw-ring-offset-color: #fff;
209
255
  --tw-ring-offset-shadow: 0 0 #0000;
210
- --tw-leading: initial;
211
- --tw-font-weight: initial;
212
- --tw-border-style: solid;
213
- --tw-outline-style: solid;
214
- --tw-duration: initial;
215
256
  --tw-translate-x: 0;
216
257
  --tw-translate-y: 0;
217
258
  --tw-translate-z: 0;
@@ -1997,6 +2038,18 @@
1997
2038
  --tw-font-weight: var(--font-weight-semibold);
1998
2039
  font-weight: var(--font-weight-semibold);
1999
2040
  }
2041
+ :scope._ao-card-header, :scope ._ao-card-header {
2042
+ display: flex;
2043
+ align-items: center;
2044
+ gap: calc(var(--spacing) * 2);
2045
+ }
2046
+ :scope._ao-card-toolbar, :scope ._ao-card-toolbar {
2047
+ margin-top: calc(var(--spacing) * -0.5);
2048
+ margin-left: auto;
2049
+ display: flex;
2050
+ align-items: center;
2051
+ gap: calc(var(--spacing) * 1);
2052
+ }
2000
2053
  :scope._ao-card-description, :scope ._ao-card-description {
2001
2054
  font-size: var(--text-sm);
2002
2055
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -3446,9 +3499,6 @@
3446
3499
  :scope._ao-block, :scope ._ao-block {
3447
3500
  display: block;
3448
3501
  }
3449
- :scope._ao-contents, :scope ._ao-contents {
3450
- display: contents;
3451
- }
3452
3502
  :scope._ao-grid, :scope ._ao-grid {
3453
3503
  display: grid;
3454
3504
  }
@@ -3464,6 +3514,9 @@
3464
3514
  :scope._ao-flex-1, :scope ._ao-flex-1 {
3465
3515
  flex: 1;
3466
3516
  }
3517
+ :scope._ao-transform, :scope ._ao-transform {
3518
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
3519
+ }
3467
3520
  :scope._ao-text-right, :scope ._ao-text-right {
3468
3521
  text-align: right;
3469
3522
  }
@@ -3471,10 +3524,6 @@
3471
3524
  --tw-numeric-spacing: tabular-nums;
3472
3525
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3473
3526
  }
3474
- :scope._ao-shadow, :scope ._ao-shadow {
3475
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3476
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3477
- }
3478
3527
  :scope._ao-select-all, :scope ._ao-select-all {
3479
3528
  -webkit-user-select: all;
3480
3529
  user-select: all;
package/dist/index.cjs CHANGED
@@ -697,18 +697,18 @@ function CardContainer({ bordered, compact, className, ...rest }) {
697
697
  * an optional title (with icon), description, children, and actions. For
698
698
  * anything outside that shape, use `<Card.Container>` and compose by hand.
699
699
  */
700
- function CardRoot({ bordered, compact, icon, title, description, actions, className, children, ...rest }) {
701
- const hasTitle = icon !== void 0 || title !== void 0;
700
+ function CardRoot({ bordered, compact, icon, title, description, toolbar, actions, className, children, ...rest }) {
701
+ const titleEl = icon !== void 0 || title !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
702
+ icon,
703
+ children: title
704
+ }) : null;
702
705
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContainer, {
703
706
  bordered,
704
707
  compact,
705
708
  className,
706
709
  ...rest,
707
710
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardBody, { children: [
708
- hasTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
709
- icon,
710
- children: title
711
- }) : null,
711
+ toolbar !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardHeader, { children: [titleEl, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardToolbar, { children: toolbar })] }) : titleEl,
712
712
  description !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardDescription, { children: description }) : null,
713
713
  children,
714
714
  actions !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardActions, { children: actions }) : null
@@ -721,6 +721,18 @@ function CardBody({ className, ...rest }) {
721
721
  ...rest
722
722
  });
723
723
  }
724
+ function CardHeader({ className, ...rest }) {
725
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
726
+ className: cn("card-header", className),
727
+ ...rest
728
+ });
729
+ }
730
+ function CardToolbar({ className, ...rest }) {
731
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
732
+ className: cn("card-toolbar", className),
733
+ ...rest
734
+ });
735
+ }
724
736
  function CardTitle({ icon, className, children, ...rest }) {
725
737
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
726
738
  className: cn("card-title", className),
@@ -743,6 +755,8 @@ function CardActions({ className, ...rest }) {
743
755
  var Card = Object.assign(CardRoot, {
744
756
  Container: CardContainer,
745
757
  Body: CardBody,
758
+ Header: CardHeader,
759
+ Toolbar: CardToolbar,
746
760
  Title: CardTitle,
747
761
  Description: CardDescription,
748
762
  Actions: CardActions