raft-ui 0.0.6 → 0.0.7

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.
Files changed (131) hide show
  1. package/CHANGELOG.md +2 -8
  2. package/{src → dist}/styles.css +0 -2
  3. package/package.json +3 -4
  4. package/src/components/alert-dialog/alert-dialog.tsx +0 -215
  5. package/src/components/alert-dialog/index.ts +0 -30
  6. package/src/components/avatar/avatar.tsx +0 -375
  7. package/src/components/avatar/index.ts +0 -17
  8. package/src/components/badge/badge.tsx +0 -393
  9. package/src/components/badge/index.ts +0 -2
  10. package/src/components/banner/banner.tsx +0 -269
  11. package/src/components/banner/index.ts +0 -8
  12. package/src/components/bottom-sheet/bottom-sheet.tsx +0 -152
  13. package/src/components/bottom-sheet/index.ts +0 -22
  14. package/src/components/button/button.tsx +0 -499
  15. package/src/components/button/index.ts +0 -2
  16. package/src/components/checkbox/checkbox-indicator.tsx +0 -128
  17. package/src/components/checkbox/checkbox.tsx +0 -350
  18. package/src/components/checkbox/index.ts +0 -2
  19. package/src/components/combobox/combobox.tsx +0 -603
  20. package/src/components/combobox/index.ts +0 -52
  21. package/src/components/context-menu/context-menu.tsx +0 -380
  22. package/src/components/context-menu/index.ts +0 -34
  23. package/src/components/conversation-preview-card/conversation-preview-card.tsx +0 -336
  24. package/src/components/conversation-preview-card/index.ts +0 -32
  25. package/src/components/description-list/description-list.tsx +0 -116
  26. package/src/components/description-list/index.ts +0 -14
  27. package/src/components/dialog/dialog.tsx +0 -152
  28. package/src/components/dialog/index.ts +0 -26
  29. package/src/components/dropdown-menu/dropdown-menu.tsx +0 -405
  30. package/src/components/dropdown-menu/index.ts +0 -38
  31. package/src/components/empty-state/empty-state.tsx +0 -177
  32. package/src/components/empty-state/index.ts +0 -16
  33. package/src/components/field/field.tsx +0 -125
  34. package/src/components/field/index.ts +0 -18
  35. package/src/components/inline-code/index.ts +0 -2
  36. package/src/components/inline-code/inline-code.tsx +0 -35
  37. package/src/components/input/index.ts +0 -2
  38. package/src/components/input/input.tsx +0 -76
  39. package/src/components/input-group/index.ts +0 -7
  40. package/src/components/input-group/input-group.tsx +0 -215
  41. package/src/components/kbd/index.ts +0 -2
  42. package/src/components/kbd/kbd.tsx +0 -43
  43. package/src/components/label/index.ts +0 -2
  44. package/src/components/label/label.tsx +0 -99
  45. package/src/components/lightbox/index.ts +0 -24
  46. package/src/components/lightbox/lightbox.tsx +0 -245
  47. package/src/components/list-item/index.ts +0 -20
  48. package/src/components/list-item/list-item.tsx +0 -263
  49. package/src/components/media-list-item/index.ts +0 -20
  50. package/src/components/media-list-item/media-list-item.tsx +0 -169
  51. package/src/components/notification-center/index.ts +0 -39
  52. package/src/components/notification-center/notification-center.tsx +0 -558
  53. package/src/components/panel-header/index.ts +0 -22
  54. package/src/components/panel-header/panel-header.tsx +0 -199
  55. package/src/components/popover/index.ts +0 -30
  56. package/src/components/popover/popover.tsx +0 -248
  57. package/src/components/preview-shell/index.ts +0 -2
  58. package/src/components/preview-shell/preview-shell.tsx +0 -51
  59. package/src/components/quoted-message-card/index.ts +0 -36
  60. package/src/components/quoted-message-card/quoted-message-card.tsx +0 -391
  61. package/src/components/radio-group/index.ts +0 -2
  62. package/src/components/radio-group/radio-group.tsx +0 -119
  63. package/src/components/section-header/index.ts +0 -16
  64. package/src/components/section-header/section-header.tsx +0 -117
  65. package/src/components/section-label/index.ts +0 -2
  66. package/src/components/section-label/section-label.tsx +0 -38
  67. package/src/components/segmented-control/index.ts +0 -12
  68. package/src/components/segmented-control/segmented-control.tsx +0 -129
  69. package/src/components/select/index.ts +0 -40
  70. package/src/components/select/select.tsx +0 -382
  71. package/src/components/separator/index.ts +0 -2
  72. package/src/components/separator/separator.tsx +0 -40
  73. package/src/components/spinner/index.ts +0 -2
  74. package/src/components/spinner/spinner.tsx +0 -228
  75. package/src/components/status/index.ts +0 -2
  76. package/src/components/status/status.tsx +0 -152
  77. package/src/components/tabs/index.ts +0 -24
  78. package/src/components/tabs/tabs.tsx +0 -451
  79. package/src/components/text/index.ts +0 -2
  80. package/src/components/text/text.tsx +0 -131
  81. package/src/components/textarea/index.ts +0 -2
  82. package/src/components/textarea/textarea.tsx +0 -136
  83. package/src/components/toggle-group/index.ts +0 -7
  84. package/src/components/toggle-group/toggle-group.tsx +0 -111
  85. package/src/components/tooltip/index.ts +0 -8
  86. package/src/components/tooltip/tooltip.tsx +0 -212
  87. package/src/index.ts +0 -429
  88. package/src/legacy/AttentionDot.tsx +0 -28
  89. package/src/legacy/AvatarListRow.tsx +0 -87
  90. package/src/legacy/AvatarSlot.tsx +0 -157
  91. package/src/legacy/Badge.tsx +0 -95
  92. package/src/legacy/Banner.tsx +0 -74
  93. package/src/legacy/BottomSheet.tsx +0 -76
  94. package/src/legacy/CheckMarker.tsx +0 -72
  95. package/src/legacy/Checkbox.tsx +0 -81
  96. package/src/legacy/ConversationPreviewCard.tsx +0 -169
  97. package/src/legacy/DismissBackdrop.tsx +0 -68
  98. package/src/legacy/EmptyState.tsx +0 -63
  99. package/src/legacy/ExperimentalBadge.tsx +0 -19
  100. package/src/legacy/FormField.tsx +0 -106
  101. package/src/legacy/KeyValueRow.tsx +0 -67
  102. package/src/legacy/Lightbox.tsx +0 -119
  103. package/src/legacy/NotificationCenter.tsx +0 -217
  104. package/src/legacy/PanelHeader.tsx +0 -94
  105. package/src/legacy/PreviewShell.tsx +0 -40
  106. package/src/legacy/QuotedMessageCard.tsx +0 -181
  107. package/src/legacy/ReorderablePanelTabs.tsx +0 -156
  108. package/src/legacy/SandboxedPreviewFrame.tsx +0 -59
  109. package/src/legacy/SearchInput.tsx +0 -23
  110. package/src/legacy/SectionEyebrow.tsx +0 -60
  111. package/src/legacy/SectionHeader.tsx +0 -68
  112. package/src/legacy/SegmentedControl.tsx +0 -74
  113. package/src/legacy/SlugInput.tsx +0 -29
  114. package/src/legacy/Spinner.tsx +0 -89
  115. package/src/legacy/StatusDot.tsx +0 -51
  116. package/src/legacy/SurfaceListItem.tsx +0 -32
  117. package/src/legacy/Textarea.tsx +0 -137
  118. package/src/legacy/button.tsx +0 -100
  119. package/src/legacy/context-menu-divider.tsx +0 -12
  120. package/src/legacy/menu-item.tsx +0 -66
  121. package/src/legacy/selection-popover.tsx +0 -212
  122. package/src/legacy/server-switcher-menu.tsx +0 -203
  123. package/src/legacy/source.css +0 -240
  124. package/src/lib/cn.ts +0 -1
  125. package/src/lib/styled-props.ts +0 -11
  126. package/src/lib/theme/theme-context.ts +0 -28
  127. package/src/lib/theme/theme-provider.tsx +0 -181
  128. package/src/lib/theme/use-theme.ts +0 -12
  129. package/src/lib/tv.ts +0 -29
  130. package/src/lib/without-children.ts +0 -6
  131. package/src/wip.ts +0 -291
@@ -1,125 +0,0 @@
1
- import { Field as BaseField } from "@base-ui/react/field";
2
- import { tv, type VariantProps } from "../../lib/tv";
3
- import { LabelAsterisk, LabelOptional } from "../label/label";
4
- import type { StyledProps } from "../../lib/styled-props";
5
- import { useThemeFamily } from "../../lib/theme/use-theme";
6
-
7
- const field = tv({
8
- slots: {
9
- root: ["group/field flex flex-col gap-1.5"],
10
- item: ["group/field-item flex items-start gap-2", "[&>[data-slot=checkbox]]:mt-px"],
11
- label: ["block leading-none", "group-data-[disabled]/field:text-foreground-disabled"],
12
- description: ["text-xs leading-5", "group-data-[disabled]/field:text-foreground-disabled"],
13
- error: ["text-xs leading-5", "group-data-[disabled]/field:text-foreground-disabled"],
14
- },
15
- variants: {
16
- theme: {
17
- brutal: {
18
- root: ["gap-1"],
19
- label: ["font-bold text-foreground-strong"],
20
- description: ["text-foreground/50"],
21
- error: ["text-danger-base"],
22
- },
23
- elegant: {
24
- label: ["font-medium text-foreground"],
25
- description: [
26
- "text-[13px] text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]",
27
- "group-data-[disabled]/field:text-foreground-disabled",
28
- ],
29
- error: ["text-[13px] text-danger-base"],
30
- },
31
- },
32
- size: {
33
- sm: { label: "text-xs" },
34
- md: { label: "text-sm" },
35
- },
36
- },
37
- compoundVariants: [{ theme: "brutal", size: "sm", class: { label: "text-foreground/60" } }],
38
- defaultVariants: {
39
- size: "md",
40
- },
41
- });
42
-
43
- export type FieldProps = StyledProps<BaseField.Root.Props>;
44
-
45
- export function Field({ className, ...props }: FieldProps) {
46
- const theme = useThemeFamily();
47
- const { root } = field({ theme });
48
- return <BaseField.Root data-slot="field" className={root({ className })} {...props} />;
49
- }
50
-
51
- export type FieldItemProps = StyledProps<BaseField.Item.Props>;
52
-
53
- export function FieldItem({ className, ...props }: FieldItemProps) {
54
- const theme = useThemeFamily();
55
- const { item } = field({ theme });
56
- return <BaseField.Item data-slot="field-item" className={item({ className })} {...props} />;
57
- }
58
-
59
- type LabelMarker =
60
- | { required?: boolean; optional?: never }
61
- | { optional?: boolean; required?: never };
62
-
63
- export type FieldLabelProps = StyledProps<BaseField.Label.Props> &
64
- Omit<VariantProps<typeof field>, "theme"> &
65
- LabelMarker;
66
-
67
- export function FieldLabel({
68
- size,
69
- required,
70
- optional,
71
- className,
72
- children,
73
- ...props
74
- }: FieldLabelProps) {
75
- const theme = useThemeFamily();
76
- const { label } = field({ theme, size });
77
- return (
78
- <BaseField.Label data-slot="field-label" className={label({ className })} {...props}>
79
- {children}
80
- {required ? <LabelAsterisk className="ml-1" /> : null}
81
- {optional ? <LabelOptional className="ml-1" /> : null}
82
- </BaseField.Label>
83
- );
84
- }
85
-
86
- export type FieldDescriptionProps = StyledProps<BaseField.Description.Props>;
87
-
88
- export function FieldDescription({ className, ...props }: FieldDescriptionProps) {
89
- const theme = useThemeFamily();
90
- const { description } = field({ theme });
91
- return (
92
- <BaseField.Description
93
- data-slot="field-description"
94
- className={description({ className })}
95
- {...props}
96
- />
97
- );
98
- }
99
-
100
- export type FieldErrorProps = StyledProps<BaseField.Error.Props>;
101
-
102
- export function FieldError({ className, role = "alert", ...props }: FieldErrorProps) {
103
- const theme = useThemeFamily();
104
- const { error } = field({ theme });
105
- return (
106
- <BaseField.Error
107
- data-slot="field-error"
108
- role={role}
109
- className={error({ className })}
110
- {...props}
111
- />
112
- );
113
- }
114
-
115
- export type FieldControlProps = BaseField.Control.Props;
116
-
117
- export function FieldControl(props: FieldControlProps) {
118
- return <BaseField.Control data-slot="field-control" {...props} />;
119
- }
120
-
121
- export type FieldValidityProps = BaseField.Validity.Props;
122
-
123
- export function FieldValidity(props: FieldValidityProps) {
124
- return <BaseField.Validity {...props} />;
125
- }
@@ -1,18 +0,0 @@
1
- export {
2
- Field,
3
- FieldControl,
4
- FieldDescription,
5
- FieldError,
6
- FieldItem,
7
- FieldLabel,
8
- FieldValidity,
9
- } from "./field";
10
- export type {
11
- FieldControlProps,
12
- FieldProps,
13
- FieldLabelProps,
14
- FieldDescriptionProps,
15
- FieldErrorProps,
16
- FieldItemProps,
17
- FieldValidityProps,
18
- } from "./field";
@@ -1,2 +0,0 @@
1
- export { InlineCode } from "./inline-code";
2
- export type { InlineCodeProps } from "./inline-code";
@@ -1,35 +0,0 @@
1
- import type { ComponentPropsWithRef } from "react";
2
- import { tv } from "../../lib/tv";
3
- import { useThemeFamily } from "../../lib/theme/use-theme";
4
-
5
- const inlineCode = tv({
6
- slots: {
7
- root: [],
8
- },
9
- variants: {
10
- theme: {
11
- brutal: {
12
- root: [
13
- "border border-black bg-brutal-yellow/50 px-1.5",
14
- "font-mono text-sm font-medium text-black [overflow-wrap:anywhere]",
15
- ],
16
- },
17
- elegant: {
18
- root: [
19
- "inline-flex items-center rounded-md px-2.5 py-0.5",
20
- "font-mono text-sm font-medium",
21
- "bg-[oklch(0.955_0_0)] text-[oklch(0.44_0_0)] dark:bg-[oklch(0.24_0.006_286)] dark:text-[oklch(0.78_0_0)]",
22
- ],
23
- },
24
- },
25
- },
26
- });
27
-
28
- export type InlineCodeProps = ComponentPropsWithRef<"code">;
29
-
30
- export function InlineCode({ className, ...props }: InlineCodeProps) {
31
- const theme = useThemeFamily();
32
- const { root } = inlineCode({ theme });
33
-
34
- return <code data-slot="inline-code" className={root({ className })} {...props} />;
35
- }
@@ -1,2 +0,0 @@
1
- export { Input } from "./input";
2
- export type { InputProps } from "./input";
@@ -1,76 +0,0 @@
1
- import { Input as BaseInput } from "@base-ui/react/input";
2
- import { tv } from "../../lib/tv";
3
- import type { StyledProps } from "../../lib/styled-props";
4
- import { useThemeFamily } from "../../lib/theme/use-theme";
5
- import type { WithoutChildren } from "../../lib/without-children";
6
-
7
- // The brutal field visual (formerly the app's `.input-brutal` class). The error
8
- // state is driven by `aria-invalid` so the control styles itself while Field /
9
- // FieldError own the message.
10
- const input = tv({
11
- slots: {
12
- root: ["w-full px-3 py-2 font-heading outline-none"],
13
- },
14
- variants: {
15
- theme: {
16
- brutal: {},
17
- elegant: {},
18
- },
19
- },
20
- compoundVariants: [
21
- {
22
- theme: "brutal",
23
- class: {
24
- root: [
25
- "border-2 border-line-strong bg-layer-panel",
26
- "shadow-sm focus:shadow-md",
27
- "aria-invalid:border-brutal-red aria-invalid:bg-brutal-red/5 aria-invalid:shadow-none aria-invalid:ring-2 aria-invalid:ring-brutal-red/60",
28
- ],
29
- },
30
- },
31
- {
32
- theme: "elegant",
33
- class: {
34
- root: [
35
- "rounded-md border border-[oklch(0.94_0_0)] bg-layer-field",
36
- "px-3 py-2 text-sm text-[oklch(0.205_0_0)] transition duration-200 ease-out dark:text-foreground",
37
- "placeholder:text-foreground-placeholder/70",
38
- "shadow-none hover:not-aria-invalid:border-[oklch(0.91_0_0)] hover:shadow-[oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0.159_0.016_266.594_/_0.03)_0px_1px_2px_0px]",
39
- "focus:border-line-strong/25 focus:bg-layer-field",
40
- "focus-visible:ring-2 focus-visible:ring-line-strong/8",
41
- "aria-invalid:border-danger-base/45 aria-invalid:hover:border-danger-base/75 aria-invalid:focus-visible:border-danger-base/75 aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-danger-base/12",
42
- "disabled:cursor-not-allowed disabled:border-line-subtle/60 disabled:bg-layer-muted/50 disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled",
43
- "disabled:hover:border-line-subtle/60 disabled:hover:shadow-none",
44
- "aria-invalid:disabled:border-line-subtle/60 aria-invalid:disabled:ring-0",
45
- ],
46
- },
47
- },
48
- ],
49
- });
50
-
51
- export type InputBehaviorProps = {
52
- /**
53
- * Add common password-manager ignore hints for non-credential fields where
54
- * extension overlays would obscure custom UI.
55
- */
56
- suppressPasswordManager?: boolean;
57
- };
58
-
59
- export type InputProps = WithoutChildren<StyledProps<BaseInput.Props>> & InputBehaviorProps;
60
-
61
- export function Input({ suppressPasswordManager, className, ...props }: InputProps) {
62
- const theme = useThemeFamily();
63
- const { root } = input({ theme });
64
-
65
- return (
66
- <BaseInput
67
- data-slot="input"
68
- className={root({ className: [suppressPasswordManager && "keeper-ignore", className] })}
69
- data-1p-ignore={suppressPasswordManager ? "true" : undefined}
70
- data-bwignore={suppressPasswordManager ? "true" : undefined}
71
- data-form-type={suppressPasswordManager ? "other" : undefined}
72
- data-lpignore={suppressPasswordManager ? "true" : undefined}
73
- {...props}
74
- />
75
- );
76
- }
@@ -1,7 +0,0 @@
1
- export { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group";
2
- export type {
3
- InputGroupProps,
4
- InputGroupAddonProps,
5
- InputGroupInputProps,
6
- InputGroupAddonTextProps,
7
- } from "./input-group";
@@ -1,215 +0,0 @@
1
- import type { ComponentPropsWithRef } from "react";
2
- import { Input as BaseInput } from "@base-ui/react/input";
3
- import { tv, type VariantProps } from "../../lib/tv";
4
- import type { StyledProps } from "../../lib/styled-props";
5
- import { useThemeFamily } from "../../lib/theme/use-theme";
6
- import type { WithoutChildren } from "../../lib/without-children";
7
- import { type InputBehaviorProps } from "../input/input";
8
-
9
- // InputGroup moves the input shell onto the wrapper so addons can live inside the
10
- // bordered box. State styling is driven by the inner control via `has-*`.
11
- const inputGroup = tv({
12
- slots: {
13
- root: [
14
- "group/input-group relative flex w-full min-w-0 items-center",
15
- "has-[[data-input-group-trim=inline-end]]:[&_[data-slot=input-group-control]]:pr-0",
16
- ],
17
- addon: [
18
- "flex shrink-0 items-center justify-center gap-2 px-3",
19
- "select-none",
20
- "[&>svg:not([class*='size-'])]:size-3.5",
21
- ],
22
- text: ["flex shrink-0 items-center px-3 text-sm", "select-none whitespace-nowrap"],
23
- // The bare control fills the row; the group owns the border/shadow/invalid.
24
- control: ["min-w-0 flex-1 bg-transparent px-3 py-2 text-sm outline-none"],
25
- },
26
- variants: {
27
- theme: {
28
- brutal: {
29
- root: [
30
- "border-2 border-line-strong bg-layer-panel shadow-sm",
31
- "has-[[data-slot=input-group-control]:focus]:not-has-[[data-slot=input-group-control][aria-invalid=true]]:shadow-md",
32
- "has-[[data-slot=input-group-control][aria-invalid=true]]:border-brutal-red has-[[data-slot=input-group-control][aria-invalid=true]]:bg-brutal-red/5 has-[[data-slot=input-group-control][aria-invalid=true]]:shadow-none has-[[data-slot=input-group-control][aria-invalid=true]]:ring-2 has-[[data-slot=input-group-control][aria-invalid=true]]:ring-brutal-red/60",
33
- ],
34
- addon: ["text-foreground/50"],
35
- text: ["font-heading text-foreground/50"],
36
- control: ["font-heading"],
37
- },
38
- elegant: {
39
- root: [
40
- "overflow-hidden rounded-md border border-[oklch(0.94_0_0)] bg-layer-field shadow-none",
41
- "text-[oklch(0.205_0_0)] transition duration-200 ease-out dark:text-foreground",
42
- "hover:border-[oklch(0.91_0_0)] hover:shadow-[oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0.159_0.016_266.594_/_0.03)_0px_1px_2px_0px]",
43
- "has-[[data-slot=input-group-control]:focus]:border-line-strong/25 has-[[data-slot=input-group-control]:focus]:bg-layer-field",
44
- "has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-line-strong/8",
45
- "has-[[data-slot=input-group-control][aria-invalid=true]]:border-danger-base/45 has-[[data-slot=input-group-control][aria-invalid=true]]:hover:border-danger-base/75 has-[[data-slot=input-group-control][aria-invalid=true]:focus]:border-danger-base/75",
46
- "has-[[data-slot=input-group-control][aria-invalid=true]:focus-visible]:ring-3 has-[[data-slot=input-group-control][aria-invalid=true]:focus-visible]:ring-danger-base/12",
47
- "has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-line-subtle/60 has-[[data-slot=input-group-control]:disabled]:bg-layer-muted/50",
48
- "has-[[data-slot=input-group-control]:disabled]:hover:border-line-subtle/60 has-[[data-slot=input-group-control]:disabled]:hover:shadow-none",
49
- "has-[[data-slot=input-group-control][aria-invalid=true]:disabled]:border-line-subtle/60 has-[[data-slot=input-group-control][aria-invalid=true]:disabled]:ring-0",
50
- ],
51
- addon: [
52
- "text-foreground-muted transition duration-200 ease-out",
53
- "group-has-[[data-slot=input-group-control]:focus]/input-group:text-foreground",
54
- "group-has-[[data-slot=input-group-control]:disabled]/input-group:text-foreground-disabled",
55
- ],
56
- text: [
57
- "text-foreground-placeholder transition duration-200 ease-out",
58
- "group-has-[[data-slot=input-group-control]:focus]/input-group:text-foreground-muted",
59
- "group-has-[[data-slot=input-group-control]:disabled]/input-group:text-foreground-disabled",
60
- ],
61
- control: [
62
- "text-[oklch(0.205_0_0)] placeholder:text-foreground-placeholder/70 dark:text-foreground",
63
- "transition duration-200 ease-out placeholder:transition placeholder:duration-200 placeholder:ease-out",
64
- "disabled:cursor-not-allowed disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled",
65
- ],
66
- },
67
- },
68
- align: {
69
- "inline-start": { addon: "order-first", text: "order-first" },
70
- "inline-end": { addon: "order-last", text: "order-last" },
71
- },
72
- variant: {
73
- default: {},
74
- container: {
75
- addon: [
76
- "self-stretch border-line-subtle/90 bg-layer-muted/35",
77
- "text-foreground-placeholder",
78
- ],
79
- text: [
80
- "self-stretch border-line-subtle/90 bg-layer-muted/35",
81
- "text-foreground-placeholder",
82
- ],
83
- },
84
- },
85
- },
86
- compoundVariants: [
87
- {
88
- theme: "brutal",
89
- variant: "container",
90
- class: {
91
- addon: "bg-brutal-yellow/30 font-bold text-black/70",
92
- text: "bg-brutal-yellow/30 font-bold text-black/70",
93
- },
94
- },
95
- {
96
- variant: "default",
97
- align: "inline-start",
98
- class: {
99
- addon: "[&~[data-slot=input-group-control]]:pl-0",
100
- text: "[&~[data-slot=input-group-control]]:pl-0",
101
- },
102
- },
103
- {
104
- variant: "container",
105
- align: "inline-start",
106
- class: { addon: "border-r", text: "border-r" },
107
- },
108
- {
109
- theme: "brutal",
110
- variant: "container",
111
- align: "inline-start",
112
- class: { addon: "border-r-2 border-black", text: "border-r-2 border-black" },
113
- },
114
- {
115
- variant: "container",
116
- align: "inline-end",
117
- class: { addon: "border-l", text: "border-l" },
118
- },
119
- {
120
- theme: "brutal",
121
- variant: "container",
122
- align: "inline-end",
123
- class: { addon: "border-l-2 border-black", text: "border-l-2 border-black" },
124
- },
125
- ],
126
- defaultVariants: {
127
- align: "inline-start",
128
- variant: "default",
129
- },
130
- });
131
-
132
- export type InputGroupProps = ComponentPropsWithRef<"div">;
133
-
134
- export function InputGroup({ className, ...props }: InputGroupProps) {
135
- const theme = useThemeFamily();
136
- const { root } = inputGroup({ theme });
137
- return <div data-slot="input-group" className={root({ className })} {...props} />;
138
- }
139
-
140
- export type InputGroupAddonProps = ComponentPropsWithRef<"div"> &
141
- Pick<VariantProps<typeof inputGroup>, "align" | "variant">;
142
-
143
- // A non-editable slot inside the group — a leading icon, a `/` prefix, a trailing
144
- // unit, etc.
145
- function InputGroupAddonRoot({
146
- align = "inline-start",
147
- variant = "default",
148
- className,
149
- ...props
150
- }: InputGroupAddonProps) {
151
- const theme = useThemeFamily();
152
- const { addon } = inputGroup({ theme, align, variant });
153
- return (
154
- <div
155
- data-slot="input-group-addon"
156
- data-align={align}
157
- data-variant={variant}
158
- data-input-group-trim={variant === "default" && align === "inline-end" ? align : undefined}
159
- className={addon({ className })}
160
- {...props}
161
- />
162
- );
163
- }
164
-
165
- export type InputGroupAddonTextProps = ComponentPropsWithRef<"span"> &
166
- Pick<VariantProps<typeof inputGroup>, "align" | "variant">;
167
-
168
- function TextAddon({
169
- align = "inline-start",
170
- variant = "default",
171
- className,
172
- ...props
173
- }: InputGroupAddonTextProps) {
174
- const theme = useThemeFamily();
175
- const { text } = inputGroup({ theme, align, variant });
176
- return (
177
- <span
178
- data-slot="input-group-text"
179
- data-align={align}
180
- data-variant={variant}
181
- data-input-group-trim={variant === "default" && align === "inline-end" ? align : undefined}
182
- className={text({ className })}
183
- {...props}
184
- />
185
- );
186
- }
187
-
188
- export const InputGroupAddon = Object.assign(InputGroupAddonRoot, {
189
- Text: TextAddon,
190
- });
191
-
192
- // The bare control inside an InputGroup — the group owns the border/shadow/invalid look.
193
- export type InputGroupInputProps = WithoutChildren<StyledProps<BaseInput.Props>> &
194
- InputBehaviorProps;
195
-
196
- export function InputGroupInput({
197
- className,
198
- suppressPasswordManager,
199
- ...props
200
- }: InputGroupInputProps) {
201
- const theme = useThemeFamily();
202
- const { control } = inputGroup({ theme });
203
-
204
- return (
205
- <BaseInput
206
- data-slot="input-group-control"
207
- className={control({ className: [suppressPasswordManager && "keeper-ignore", className] })}
208
- data-1p-ignore={suppressPasswordManager ? "true" : undefined}
209
- data-bwignore={suppressPasswordManager ? "true" : undefined}
210
- data-form-type={suppressPasswordManager ? "other" : undefined}
211
- data-lpignore={suppressPasswordManager ? "true" : undefined}
212
- {...props}
213
- />
214
- );
215
- }
@@ -1,2 +0,0 @@
1
- export { Kbd, KbdGroup } from "./kbd";
2
- export type { KbdGroupProps, KbdProps } from "./kbd";
@@ -1,43 +0,0 @@
1
- import type { ComponentPropsWithRef } from "react";
2
- import { tv } from "../../lib/tv";
3
- import { useThemeFamily } from "../../lib/theme/use-theme";
4
-
5
- const kbd = tv({
6
- slots: {
7
- root: [
8
- "pointer-events-none inline-flex w-fit shrink-0 items-center justify-center gap-1",
9
- "whitespace-nowrap font-sans text-sm font-medium leading-none select-none",
10
- "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3",
11
- ],
12
- group: ["inline-flex items-center gap-1"],
13
- },
14
- variants: {
15
- theme: {
16
- brutal: {
17
- root: ["text-[13px] text-foreground/70"],
18
- },
19
- elegant: {
20
- root: [
21
- "min-w-5 rounded bg-layer-panel px-1.5 py-1 text-[10px]",
22
- "font-medium text-foreground-muted ring-1 ring-inset ring-line-muted",
23
- ],
24
- },
25
- },
26
- },
27
- });
28
-
29
- export type KbdProps = ComponentPropsWithRef<"kbd">;
30
-
31
- export function Kbd({ className, ...props }: KbdProps) {
32
- const theme = useThemeFamily();
33
- const { root } = kbd({ theme });
34
- return <kbd data-slot="kbd" className={root({ className })} {...props} />;
35
- }
36
-
37
- export type KbdGroupProps = ComponentPropsWithRef<"span">;
38
-
39
- export function KbdGroup({ className, ...props }: KbdGroupProps) {
40
- const theme = useThemeFamily();
41
- const { group } = kbd({ theme });
42
- return <span data-slot="kbd-group" className={group({ className })} {...props} />;
43
- }
@@ -1,2 +0,0 @@
1
- export { Label, LabelAsterisk, LabelOptional, LabelSub } from "./label";
2
- export type { LabelAsteriskProps, LabelOptionalProps, LabelProps, LabelSubProps } from "./label";
@@ -1,99 +0,0 @@
1
- import { mergeProps } from "@base-ui/react/merge-props";
2
- import { useRender } from "@base-ui/react/use-render";
3
- import type { ComponentPropsWithRef } from "react";
4
- import { tv, type VariantProps } from "../../lib/tv";
5
- import { useThemeFamily } from "../../lib/theme/use-theme";
6
-
7
- const label = tv({
8
- slots: {
9
- root: [
10
- "group/label inline-flex w-fit items-center gap-1",
11
- "cursor-pointer select-none",
12
- "text-sm leading-none",
13
- "aria-disabled:cursor-not-allowed aria-disabled:text-foreground-disabled",
14
- ],
15
- asterisk: ["text-accent-400", "group-aria-disabled/label:text-foreground-disabled"],
16
- sub: ["font-normal normal-case", "group-aria-disabled/label:text-foreground-disabled"],
17
- },
18
- variants: {
19
- theme: {
20
- brutal: {
21
- root: "font-bold text-foreground-strong",
22
- sub: "font-bold tracking-wide text-black/40",
23
- },
24
- elegant: {
25
- root: "font-medium text-foreground",
26
- sub: "text-foreground/40",
27
- },
28
- },
29
- size: {
30
- sm: { root: "text-xs" },
31
- md: { root: "text-sm" },
32
- },
33
- },
34
- defaultVariants: {
35
- size: "md",
36
- },
37
- });
38
-
39
- export type LabelProps = useRender.ComponentProps<"label"> &
40
- Omit<VariantProps<typeof label>, "theme"> & {
41
- disabled?: boolean;
42
- };
43
-
44
- function LabelRoot({ size, disabled, className, render, ...props }: LabelProps) {
45
- const theme = useThemeFamily();
46
- const { root } = label({ theme, size });
47
- const defaultProps: useRender.ElementProps<"label"> = {
48
- "aria-disabled": disabled ? true : undefined,
49
- className: root({ className }),
50
- };
51
-
52
- return useRender({
53
- defaultTagName: "label",
54
- render,
55
- props: mergeProps<"label">(defaultProps, props),
56
- state: {
57
- slot: "label",
58
- disabled: disabled ?? false,
59
- },
60
- });
61
- }
62
-
63
- export type LabelAsteriskProps = ComponentPropsWithRef<"span">;
64
-
65
- export function LabelAsterisk({ className, children = "*", ...props }: LabelAsteriskProps) {
66
- const theme = useThemeFamily();
67
- const { asterisk } = label({ theme });
68
-
69
- return (
70
- <span data-slot="label-asterisk" className={asterisk({ className })} {...props}>
71
- {children}
72
- </span>
73
- );
74
- }
75
-
76
- export type LabelSubProps = ComponentPropsWithRef<"span">;
77
-
78
- export function LabelSub({ className, ...props }: LabelSubProps) {
79
- const theme = useThemeFamily();
80
- const { sub } = label({ theme });
81
-
82
- return <span data-slot="label-sub" className={sub({ className })} {...props} />;
83
- }
84
-
85
- export type LabelOptionalProps = LabelSubProps;
86
-
87
- export function LabelOptional({ children = "(optional)", ...props }: LabelOptionalProps) {
88
- return (
89
- <LabelSub data-slot="label-optional" {...props}>
90
- {children}
91
- </LabelSub>
92
- );
93
- }
94
-
95
- export const Label = Object.assign(LabelRoot, {
96
- Asterisk: LabelAsterisk,
97
- Optional: LabelOptional,
98
- Sub: LabelSub,
99
- });
@@ -1,24 +0,0 @@
1
- export {
2
- Lightbox,
3
- LightboxActions,
4
- LightboxClose,
5
- LightboxContent,
6
- LightboxHeader,
7
- LightboxMedia,
8
- LightboxPortal,
9
- LightboxStage,
10
- LightboxTitle,
11
- LightboxTrigger,
12
- } from "./lightbox";
13
- export type {
14
- LightboxActionsProps,
15
- LightboxCloseProps,
16
- LightboxContentProps,
17
- LightboxHeaderProps,
18
- LightboxMediaProps,
19
- LightboxPortalProps,
20
- LightboxProps,
21
- LightboxStageProps,
22
- LightboxTitleProps,
23
- LightboxTriggerProps,
24
- } from "./lightbox";