@xjur-ui/react 1.0.1 → 1.0.2

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 (20) hide show
  1. package/.turbo/turbo-build.log +13 -11
  2. package/CHANGELOG.md +7 -0
  3. package/dist/components/badge.d.ts +13 -0
  4. package/dist/components/badge.js +111 -0
  5. package/dist/components/chip.d.ts +1 -1
  6. package/dist/components/date-picker.js +11 -9
  7. package/dist/components/icon.d.ts +1 -1
  8. package/dist/components/icon.js +3 -1
  9. package/dist/components/input.d.ts +1 -1
  10. package/dist/components/input.js +23 -7
  11. package/dist/components/select.js +11 -9
  12. package/dist/components/tag.d.ts +1 -1
  13. package/dist/components/typography.d.ts +1 -1
  14. package/dist/index.css +132 -55
  15. package/package.json +3 -2
  16. package/src/components/badge.tsx +40 -0
  17. package/src/components/date-picker.tsx +15 -9
  18. package/src/components/input.tsx +22 -7
  19. package/src/components/select.tsx +15 -9
  20. package/src/resources/icons.ts +3 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
- > @xjur-ui/react@1.0.0 build
2
+ > @xjur-ui/react@1.0.1 build
3
3
  > tsup
4
4
 
5
- CLI Building entry: src/index.ts, src/components/avatar.tsx, src/components/button.tsx, src/components/calendar.tsx, src/components/checkbox.tsx, src/components/chip.tsx, src/components/collapsible.tsx, src/components/date-picker.tsx, src/components/divider.tsx, src/components/dropdown-menu.tsx, src/components/icon.tsx, src/components/input.tsx, src/components/list.tsx, src/components/logo.tsx, src/components/otp-input.tsx, src/components/radio.tsx, src/components/search-input.tsx, src/components/select.tsx, src/components/sheet.tsx, src/components/switch.tsx, src/components/tabs.tsx, src/components/tag.tsx, src/components/typography.tsx
5
+ CLI Building entry: src/index.ts, src/components/avatar.tsx, src/components/badge.tsx, src/components/button.tsx, src/components/calendar.tsx, src/components/checkbox.tsx, src/components/chip.tsx, src/components/collapsible.tsx, src/components/date-picker.tsx, src/components/divider.tsx, src/components/dropdown-menu.tsx, src/components/icon.tsx, src/components/input.tsx, src/components/list.tsx, src/components/logo.tsx, src/components/otp-input.tsx, src/components/radio.tsx, src/components/search-input.tsx, src/components/select.tsx, src/components/sheet.tsx, src/components/switch.tsx, src/components/tabs.tsx, src/components/tag.tsx, src/components/typography.tsx
6
6
  CLI Using tsconfig: tsconfig.json
7
7
  CLI tsup v8.5.0
8
8
  CLI Using tsup config: /home/vsts/work/1/s/packages/react/tsup.config.ts
@@ -12,31 +12,33 @@ ESM Build start
12
12
  DTS Build start
13
13
  ESM dist/index.js 0 B
14
14
  ESM dist/components/avatar.js 1.23 KB
15
- ESM dist/index.css 51.62 KB
15
+ ESM dist/index.css 54.65 KB
16
+ ESM dist/components/badge.js 3.08 KB
16
17
  ESM dist/components/button.js 2.73 KB
17
18
  ESM dist/components/calendar.js 19.27 KB
18
19
  ESM dist/components/checkbox.js 4.64 KB
19
20
  ESM dist/components/chip.js 6.34 KB
20
21
  ESM dist/components/collapsible.js 998.00 B
21
- ESM dist/components/date-picker.js 6.55 KB
22
+ ESM dist/components/date-picker.js 6.90 KB
22
23
  ESM dist/components/divider.js 697.00 B
23
24
  ESM dist/components/dropdown-menu.js 7.19 KB
24
- ESM dist/components/icon.js 2.69 KB
25
- ESM dist/components/input.js 7.41 KB
25
+ ESM dist/components/icon.js 2.72 KB
26
+ ESM dist/components/input.js 8.07 KB
26
27
  ESM dist/components/list.js 4.34 KB
27
28
  ESM dist/components/logo.js 20.93 KB
28
29
  ESM dist/components/otp-input.js 1.00 KB
29
30
  ESM dist/components/radio.js 4.52 KB
30
31
  ESM dist/components/search-input.js 7.70 KB
31
- ESM dist/components/select.js 15.07 KB
32
+ ESM dist/components/select.js 15.44 KB
32
33
  ESM dist/components/sheet.js 6.89 KB
33
34
  ESM dist/components/switch.js 1.13 KB
34
35
  ESM dist/components/tabs.js 1.43 KB
35
36
  ESM dist/components/tag.js 4.77 KB
36
37
  ESM dist/components/typography.js 2.21 KB
37
- ESM ⚡️ Build success in 1663ms
38
- DTS ⚡️ Build success in 5675ms
38
+ ESM ⚡️ Build success in 1286ms
39
+ DTS ⚡️ Build success in 5617ms
39
40
  DTS dist/index.d.ts 13.00 B
41
+ DTS dist/components/badge.d.ts 607.00 B
40
42
  DTS dist/components/calendar.d.ts 448.00 B
41
43
  DTS dist/components/checkbox.d.ts 305.00 B
42
44
  DTS dist/components/chip.d.ts 1.36 KB
@@ -57,5 +59,5 @@ DTS dist/components/switch.d.ts 300.00 B
57
59
  DTS dist/components/tabs.d.ts 737.00 B
58
60
  DTS dist/components/tag.d.ts 1.07 KB
59
61
  DTS dist/components/typography.d.ts 993.00 B
60
- DTS dist/components/input.d.ts 2.11 KB
61
- DTS dist/components/icon.d.ts 2.22 KB
62
+ DTS dist/components/input.d.ts 2.12 KB
63
+ DTS dist/components/icon.d.ts 2.25 KB
package/CHANGELOG.md CHANGED
@@ -1,9 +1,16 @@
1
1
  # @xjur-ui/react
2
2
 
3
+ ## 1.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - ca57b41: New release
8
+
3
9
  ## 1.0.1
4
10
 
5
11
  ### Patch Changes
6
12
 
13
+ - d3673d9: Melhorias no fluxo de inputs e novos components
7
14
  - 78f16bc: Criação dos componentes principais para execução das telas de agenda
8
15
  - ea53c28: Refactor package structure
9
16
  - Updated dependencies [78f16bc]
package/dist/components/badge.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as class_variance_authority_types from 'class-variance-authority/types';
3
+ import { ClassVariantProps } from '@xjur-ui/util';
4
+
5
+ declare const badgeVariants: (props?: ({
6
+ variant?: "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | null | undefined;
7
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
8
+ declare function Badge({ variant, children, className }: ClassVariantProps<typeof badgeVariants> & {
9
+ children: string;
10
+ className?: string;
11
+ }): react_jsx_runtime.JSX.Element;
12
+
13
+ export { Badge };
package/dist/components/badge.js ADDED
@@ -0,0 +1,111 @@
1
+ // src/components/badge.tsx
2
+ import { cva as cva2, cx } from "@xjur-ui/util";
3
+
4
+ // src/components/typography.tsx
5
+ import { Slot } from "@radix-ui/react-slot";
6
+ import { cva } from "@xjur-ui/util";
7
+ import { memo } from "react";
8
+ import { jsx } from "react/jsx-runtime";
9
+ var typographyVariants = cva("", {
10
+ variants: {
11
+ variant: {
12
+ body: "",
13
+ label: "",
14
+ title: "",
15
+ headline: ""
16
+ },
17
+ size: {
18
+ "sm-2x": "",
19
+ "sm-1x": "",
20
+ sm: "",
21
+ md: "",
22
+ lg: ""
23
+ },
24
+ weight: {
25
+ thin: "font-thin",
26
+ extraLight: "font-extralight",
27
+ light: "font-light",
28
+ normal: "font-normal",
29
+ medium: "font-medium",
30
+ semibold: "font-semibold",
31
+ bold: "font-bold",
32
+ extraBold: "font-extrabold",
33
+ black: "font-black"
34
+ }
35
+ },
36
+ compoundVariants: [
37
+ { variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
38
+ { variant: "body", size: "sm", class: "text-size-body-sm" },
39
+ { variant: "body", size: "md", class: "text-size-body-md" },
40
+ { variant: "body", size: "lg", class: "text-size-body-lg" },
41
+ { variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
42
+ { variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
43
+ { variant: "label", size: "sm", class: "text-size-label-sm" },
44
+ { variant: "label", size: "md", class: "text-size-label-md" },
45
+ { variant: "label", size: "lg", class: "text-size-label-lg" },
46
+ { variant: "title", size: "sm", class: "text-size-title-sm" },
47
+ { variant: "title", size: "md", class: "text-size-title-md" },
48
+ { variant: "title", size: "lg", class: "text-size-title-lg" },
49
+ { variant: "headline", size: "sm", class: "text-size-headline-sm" },
50
+ { variant: "headline", size: "md", class: "text-size-headline-md" },
51
+ { variant: "headline", size: "lg", class: "text-size-headline-lg" }
52
+ ],
53
+ defaultVariants: {
54
+ variant: "body",
55
+ size: "md",
56
+ weight: "normal"
57
+ }
58
+ });
59
+ var Typography = memo(
60
+ ({
61
+ variant,
62
+ size,
63
+ weight,
64
+ asChild,
65
+ className,
66
+ ...props
67
+ }) => {
68
+ const Component = asChild ? Slot : "span";
69
+ return /* @__PURE__ */ jsx(
70
+ Component,
71
+ {
72
+ className: typographyVariants({ variant, size, weight, className }),
73
+ ...props
74
+ }
75
+ );
76
+ }
77
+ );
78
+ Typography.displayName = "Typography";
79
+
80
+ // src/components/badge.tsx
81
+ import { jsx as jsx2 } from "react/jsx-runtime";
82
+ var badgeVariants = cva2(
83
+ [
84
+ "flex items-center justify-center size-large p-small-2x text-neutral-label rounded-circle"
85
+ ],
86
+ {
87
+ variants: {
88
+ variant: {
89
+ primary: "bg-primary-idle",
90
+ secondary: "bg-secondary-idle",
91
+ neutral: "bg-alt-2-idle",
92
+ success: "bg-success-idle",
93
+ warning: "bg-warning-idle",
94
+ danger: "bg-danger-idle"
95
+ }
96
+ },
97
+ defaultVariants: {
98
+ variant: "neutral"
99
+ }
100
+ }
101
+ );
102
+ function Badge({
103
+ variant = "neutral",
104
+ children,
105
+ className
106
+ }) {
107
+ return /* @__PURE__ */ jsx2("span", { className: cx(badgeVariants({ variant }), className), children: /* @__PURE__ */ jsx2(Typography, { className: "text-inherit", size: "sm-2x", variant: "label", children }) });
108
+ }
109
+ export {
110
+ Badge
111
+ };
package/dist/components/chip.d.ts CHANGED
@@ -8,7 +8,7 @@ import { AvatarRoot } from './avatar.js';
8
8
  import '@radix-ui/react-avatar';
9
9
 
10
10
  declare const chipVariants: (props?: ({
11
- variant?: "primary" | "danger" | "neutral" | null | undefined;
11
+ variant?: "primary" | "neutral" | "danger" | null | undefined;
12
12
  } & class_variance_authority_types.ClassProp) | undefined) => string;
13
13
  declare function ChipRoot({ className, variant, ...props }: ComponentProps<'div'> & ClassVariantProps<typeof chipVariants>): react_jsx_runtime.JSX.Element;
14
14
  declare function ChipText({ variant, size, weight, className, ...props }: ComponentProps<typeof Typography>): react_jsx_runtime.JSX.Element;
package/dist/components/date-picker.js CHANGED
@@ -115,7 +115,7 @@ function DatePickerContent({
115
115
  align,
116
116
  className: cx(
117
117
  className,
118
- "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)]"
118
+ "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]"
119
119
  ),
120
120
  side,
121
121
  sideOffset,
@@ -156,25 +156,27 @@ function DatePickerLabel({
156
156
  {
157
157
  asChild: true,
158
158
  className: cx(
159
- "bg-layer-2-idle w-fit font-normal",
160
- "pointer-events-none absolute top-[50%] left-auto -translate-y-1/2",
161
- "ease pointer-events-none transition-all duration-150",
159
+ "inline-block max-w-full truncate text-left font-normal",
160
+ "left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2",
161
+ "ease transition-all duration-250",
162
162
  // Content Open
163
163
  "group-data-[state=open]:text-primary-idle",
164
- "group-data-[state=open]:bg-layer-2-idle",
165
164
  "group-data-[state=open]:-top-[3px]",
166
165
  "group-data-[state=open]:text-size-label-sm-1x",
167
166
  "group-data-[state=open]:font-medium",
168
167
  // Filled
169
168
  "group-has-[input:not(:placeholder-shown)]:text-primary-idle",
170
- "group-has-[input:not(:placeholder-shown)]:bg-layer-2-idle",
171
169
  "group-has-[input:not(:placeholder-shown)]:-top-[3px]",
172
170
  "group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x",
173
171
  "group-has-[input:not(:placeholder-shown)]:font-medium",
174
172
  // If has left slot
175
173
  "group-has-[div[data-slot=date-picker-left-slot]]:left-large-4x",
176
- "group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-auto",
177
- "group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto",
174
+ "group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small",
175
+ "group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small",
176
+ // If has right slot
177
+ "group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x",
178
+ "group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small",
179
+ "group-has-[div[data-slot=date-picker-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small",
178
180
  // Animate
179
181
  "group-data-[state=open]:animate-in",
180
182
  "group-data-[state=closed]:animate-out",
@@ -183,7 +185,7 @@ function DatePickerLabel({
183
185
  ),
184
186
  weight: "medium",
185
187
  ...props,
186
- children: /* @__PURE__ */ jsx2("label", { htmlFor, children })
188
+ children: /* @__PURE__ */ jsx2("label", { htmlFor, children: /* @__PURE__ */ jsx2("span", { className: "bg-layer-2-idle rounded-small-1x max-w-full", children }) })
187
189
  }
188
190
  );
189
191
  }
package/dist/components/icon.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ComponentProps } from 'react';
3
3
 
4
- declare const icons: readonly ["account_balance", "ad_units", "add_a_photo", "add", "adjust", "archive", "arrow_downward_alt", "arrow_downward", "arrow_drop_down", "arrow_drop_up", "arrow_split", "arrow_upward_alt", "arrow_upward", "attach_file", "attach_money", "autorenew", "brightness_1", "calendar_today", "call", "chat_bubble", "check_circle", "check", "chevron_left", "chevron_right", "close", "collapse_all", "contacts", "content_copy", "dangerous", "dashboard", "delete", "download", "draft", "drafts", "drag_handle", "drag_indicator", "edit_document", "edit_square", "edit", "error", "expand_all", "file_export", "filter_alt", "filter_list", "first_page", "flag_2", "folder_open", "folder", "format_bold", "format_italic", "format_italic", "format_size", "format_strikethrough", "gavel", "group", "headphones", "help", "hourglass_bottom", "imagesmode", "import_contacts", "inbox", "info", "inventory_2", "keep", "keep", "keyboard_arrow_down", "keyboard_arrow_up", "keyboard_return", "label_off", "label", "last_page", "left_panel_close", "left_panel_open", "link_off", "link", "linked_services", "list", "location_on", "lock", "logout", "mail", "menu", "mic", "more_vert", "notifications", "numbers", "person_add", "person_off", "person", "play_circle", "progress_activity", "question_mark", "radio_button_unchecked", "refresh", "remove", "reply", "right_panel_close", "right_panel_open", "schedule", "search", "sell", "send", "settings", "share", "smart_display", "star", "star", "swap_vert", "thumb_down", "thumb_up", "tune", "unarchive", "undo", "upload", "verified_user", "videocam", "view_list", "view_module", "view_object_track", "visibility_off", "visibility", "warning", "wifi_2_bar", "wifi_off", "wifi", "work", "workspaces", "article", "id_card", "badge", "home", "save", "code", "favorite", "analytics", "reports", "event", "account_circle", "history", "security"];
4
+ declare const icons: readonly ["account_balance", "ad_units", "add_a_photo", "add", "adjust", "archive", "arrow_downward_alt", "arrow_downward", "arrow_drop_down", "arrow_drop_up", "arrow_split", "arrow_upward_alt", "arrow_upward", "attach_file", "attach_money", "autorenew", "brightness_1", "calendar_today", "call", "chat_bubble", "check_circle", "check", "chevron_left", "chevron_right", "close", "collapse_all", "contacts", "content_copy", "dangerous", "dashboard", "delete", "download", "draft", "drafts", "drag_handle", "drag_indicator", "edit_document", "edit_square", "edit", "error", "expand_all", "file_export", "filter_alt", "filter_list", "first_page", "flag_2", "folder_open", "folder", "format_bold", "format_italic", "format_italic", "format_size", "format_strikethrough", "gavel", "group", "headphones", "help", "hourglass_bottom", "imagesmode", "import_contacts", "inbox", "info", "inventory_2", "keep", "keep", "keyboard_arrow_down", "keyboard_arrow_up", "keyboard_return", "label_off", "label", "last_page", "left_panel_close", "left_panel_open", "link_off", "link", "linked_services", "list", "location_on", "lock", "logout", "mail", "menu", "mic", "more_vert", "notifications", "numbers", "person_add", "person_off", "person", "play_circle", "progress_activity", "question_mark", "radio_button_unchecked", "refresh", "remove", "reply", "right_panel_close", "right_panel_open", "schedule", "search", "sell", "send", "settings", "share", "smart_display", "star", "star", "swap_vert", "thumb_down", "thumb_up", "tune", "unarchive", "undo", "upload", "verified_user", "videocam", "view_list", "view_module", "view_object_track", "visibility_off", "visibility", "warning", "wifi_2_bar", "wifi_off", "wifi", "work", "workspaces", "article", "id_card", "badge", "home", "save", "code", "favorite", "analytics", "reports", "event", "account_circle", "history", "security", "bar_chart", "category"];
5
5
  type IconType = (typeof icons)[number];
6
6
 
7
7
  type IconProps = {
package/dist/components/icon.js CHANGED
@@ -142,7 +142,9 @@ var icons = [
142
142
  "event",
143
143
  "account_circle",
144
144
  "history",
145
- "security"
145
+ "security",
146
+ "bar_chart",
147
+ "category"
146
148
  ];
147
149
 
148
150
  // src/components/icon.tsx
package/dist/components/input.d.ts CHANGED
@@ -12,7 +12,7 @@ type InputProps = {
12
12
  };
13
13
  declare function InputRoot({ className, children, variant, ...props }: ComponentProps<'div'> & InputProps): react_jsx_runtime.JSX.Element;
14
14
  declare function InputContent({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
15
- declare function InputLabel({ htmlFor, className, ...props }: ComponentProps<'label'> & {
15
+ declare function InputLabel({ htmlFor, className, children, ...props }: ComponentProps<'label'> & {
16
16
  htmlFor: string;
17
17
  }): react_jsx_runtime.JSX.Element;
18
18
  declare function InputText({ className, maskOptions, maskType, ...props }: ComponentProps<'input'> & {
package/dist/components/input.js CHANGED
@@ -116,7 +116,7 @@ function InputContent({ className, ...props }) {
116
116
  variants: {
117
117
  variant: {
118
118
  default: "",
119
- outlined: "bg-layer-2-idle border-border-layer-2 border hover:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle",
119
+ outlined: "bg-layer-2-idle border-border-layer-2 border hover:group-has-[input:not(:focus-within)]:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle",
120
120
  filled: "bg-layer-2-hover group-hover:border-border-layer-1 group-hover:border-1"
121
121
  }
122
122
  }
@@ -129,6 +129,7 @@ function InputContent({ className, ...props }) {
129
129
  function InputLabel({
130
130
  htmlFor,
131
131
  className,
132
+ children,
132
133
  ...props
133
134
  }) {
134
135
  return /* @__PURE__ */ jsx(FieldContext.Consumer, { children: ({ variant }) => {
@@ -136,10 +137,10 @@ function InputLabel({
136
137
  "label",
137
138
  {
138
139
  className: cx(
139
- "rounded-small-1x text-size-body-md text-neutral-dark data-[variant=outlined]:bg-layer-2-idle bg-layer-2-hover w-fit font-normal",
140
- "ease animate-in pointer-events-none absolute top-1/2 left-auto -translate-y-1/2 transition-all duration-250",
140
+ "group text-size-body-md text-neutral-dark inline-block max-w-full truncate text-left",
141
+ "ease animate-in left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2 transition-all duration-250",
141
142
  // Filled
142
- "group-focus-within:text-primary-idle group-focus-within:bg-layer-2-hover data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-focus-within:-top-[3px]",
143
+ "group-focus-within:text-primary-idle group-focus-within:-top-[3px]",
143
144
  "group-focus-within:text-size-label-sm-1x group-focus-within:font-medium",
144
145
  "group-has-[input:not(:placeholder-shown)]:-top-[3px]",
145
146
  "group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x",
@@ -147,8 +148,12 @@ function InputLabel({
147
148
  "data-[variant=outlined]:group-has-[input:not(:placeholder-shown)]:text-primary-idle",
148
149
  // If has left slot
149
150
  "group-has-[div[data-slot=input-left-slot]]:left-large-4x",
150
- "group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-auto",
151
- "group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto",
151
+ "group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-small",
152
+ "group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small",
153
+ // If has right slot
154
+ "group-has-[div[data-slot=input-right-slot]]:right-large-4x",
155
+ "group-has-[div[data-slot=input-right-slot]]:group-focus-within:right-small",
156
+ "group-has-[div[data-slot=input-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small",
152
157
  // Animate
153
158
  "group-focus-within:animate-in",
154
159
  "group-has-[input:not(:placeholder-shown)]:animate-out",
@@ -156,7 +161,18 @@ function InputLabel({
156
161
  ),
157
162
  "data-variant": variant,
158
163
  htmlFor,
159
- ...props
164
+ ...props,
165
+ children: /* @__PURE__ */ jsx(
166
+ "span",
167
+ {
168
+ className: cx(
169
+ "rounded-small-1x max-w-full",
170
+ "group-data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-data-[variant=filled]:group-focus-within:bg-layer-2-hover",
171
+ "group-data-[variant=outlined]:bg-layer-2-idle group-data-[variant=filled]:bg-layer-2-hover"
172
+ ),
173
+ children
174
+ }
175
+ )
160
176
  }
161
177
  );
162
178
  } });
package/dist/components/select.js CHANGED
@@ -371,7 +371,7 @@ function SelectContent({
371
371
  align,
372
372
  className: cx5(
373
373
  className,
374
- "group z-10 max-h-[var(--radix-popover-content-available-height)] w-[var(--radix-popover-trigger-width)]"
374
+ "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]"
375
375
  ),
376
376
  side,
377
377
  sideOffset,
@@ -411,7 +411,7 @@ function SelectMultiValue({
411
411
  {
412
412
  className: cx5(
413
413
  className,
414
- "gap-small-1x scrollbar-hide group-has-[div[data-slot=select-left-slot]]:pl-large-1x flex overflow-x-auto"
414
+ "gap-small-1x scrollbar-hide group-has-[div[data-slot=select-left-slot]]:pl-large-1x overflow-x-small flex"
415
415
  ),
416
416
  ...props,
417
417
  children: [
@@ -442,25 +442,27 @@ function SelectLabel({
442
442
  {
443
443
  asChild: true,
444
444
  className: cx5(
445
- "bg-layer-2-idle w-fit font-normal",
446
- "pointer-events-none absolute top-1/2 left-auto -translate-y-1/2",
445
+ "inline-block max-w-full truncate text-left font-normal",
446
+ "left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2",
447
447
  "ease transition-all duration-250",
448
448
  // Content Open
449
449
  "group-data-[state=open]:text-primary-idle",
450
- "group-data-[state=open]:bg-layer-2-idle",
451
450
  "group-data-[state=open]:-top-[3px]",
452
451
  "group-data-[state=open]:text-size-label-sm-1x",
453
452
  "group-data-[state=open]:font-medium",
454
453
  // Filled
455
454
  "group-has-[input:not(:placeholder-shown)]:text-primary-idle",
456
- "group-has-[input:not(:placeholder-shown)]:bg-layer-2-idle",
457
455
  "group-has-[input:not(:placeholder-shown)]:-top-[3px]",
458
456
  "group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x",
459
457
  "group-has-[input:not(:placeholder-shown)]:font-medium",
460
458
  // If has left slot
461
459
  "group-has-[div[data-slot=select-left-slot]]:left-large-4x",
462
- "group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-auto",
463
- "group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto",
460
+ "group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-small",
461
+ "group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small",
462
+ // If has right slot
463
+ "group-has-[div[data-slot=select-right-slot]]:right-large-4x",
464
+ "group-has-[div[data-slot=select-right-slot]]:group-data-[state=open]:right-small",
465
+ "group-has-[div[data-slot=select-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small",
464
466
  // Animate
465
467
  "group-data-[state=open]:animate-in",
466
468
  "group-data-[state=closed]:animate-out",
@@ -469,7 +471,7 @@ function SelectLabel({
469
471
  ),
470
472
  weight: "medium",
471
473
  ...props,
472
- children: /* @__PURE__ */ jsx6("label", { htmlFor, children })
474
+ children: /* @__PURE__ */ jsx6("label", { htmlFor, children: /* @__PURE__ */ jsx6("span", { className: "bg-layer-2-idle rounded-small-1x max-w-full", children }) })
473
475
  }
474
476
  );
475
477
  }
package/dist/components/tag.d.ts CHANGED
@@ -6,7 +6,7 @@ import { Typography } from './typography.js';
6
6
  import { Icon, IconType } from './icon.js';
7
7
 
8
8
  declare const tagVariants: (props?: ({
9
- variant?: "primary" | "danger" | "neutral" | null | undefined;
9
+ variant?: "primary" | "neutral" | "danger" | null | undefined;
10
10
  } & class_variance_authority_types.ClassProp) | undefined) => string;
11
11
  declare function TagRoot({ className, variant, ...props }: ComponentProps<'div'> & ClassVariantProps<typeof tagVariants>): react_jsx_runtime.JSX.Element;
12
12
  declare function TagText({ variant, size, weight, className, ...props }: ComponentProps<typeof Typography>): react_jsx_runtime.JSX.Element;
package/dist/components/typography.d.ts CHANGED
@@ -7,7 +7,7 @@ import { ClassVariantProps } from '@xjur-ui/util';
7
7
  declare const typographyVariants: (props?: ({
8
8
  variant?: "body" | "label" | "title" | "headline" | null | undefined;
9
9
  size?: "sm" | "md" | "lg" | "sm-2x" | "sm-1x" | null | undefined;
10
- weight?: "bold" | "normal" | "black" | "medium" | "thin" | "light" | "extraLight" | "semibold" | "extraBold" | null | undefined;
10
+ weight?: "bold" | "thin" | "extraLight" | "light" | "normal" | "medium" | "semibold" | "extraBold" | "black" | null | undefined;
11
11
  } & class_variance_authority_types.ClassProp) | undefined) => string;
12
12
  interface TypographyProps extends ComponentProps<'base'>, ClassVariantProps<typeof typographyVariants> {
13
13
  asChild?: boolean;
package/dist/index.css CHANGED
@@ -50,6 +50,7 @@
50
50
  "Segoe UI Symbol",
51
51
  "Noto Color Emoji";
52
52
  --spacing-none: 0;
53
+ --spacing-small-2x: 2px;
53
54
  --spacing-small-1x: 4px;
54
55
  --spacing-small_1x-alt: 6px;
55
56
  --spacing-small: 8px;
@@ -107,6 +108,8 @@
107
108
  --color-danger-alt-hover: #F7D9DC;
108
109
  --color-danger-alt-pressed: #F4CDCD;
109
110
  --color-danger-label-idle: #E83040;
111
+ --color-success-idle: #169C55;
112
+ --color-warning-idle: #DF9F20;
110
113
  --text-size-body-sm-1x: 12px;
111
114
  --text-size-body-sm-1x--line-height: 16px;
112
115
  --text-size-body-sm: 13px;
@@ -359,9 +362,6 @@
359
362
  .top-1\/2 {
360
363
  top: calc(1/2 * 100%);
361
364
  }
362
- .top-\[50\%\] {
363
- top: 50%;
364
- }
365
365
  .right-0 {
366
366
  right: calc(var(--spacing) * 0);
367
367
  }
@@ -374,9 +374,6 @@
374
374
  .left-0 {
375
375
  left: calc(var(--spacing) * 0);
376
376
  }
377
- .left-auto {
378
- left: auto;
379
- }
380
377
  .left-small {
381
378
  left: var(--spacing-small);
382
379
  }
@@ -408,6 +405,9 @@
408
405
  .hidden {
409
406
  display: none;
410
407
  }
408
+ .inline-block {
409
+ display: inline-block;
410
+ }
411
411
  .inline-flex {
412
412
  display: inline-flex;
413
413
  }
@@ -460,9 +460,6 @@
460
460
  .w-3\/4 {
461
461
  width: calc(3/4 * 100%);
462
462
  }
463
- .w-\[var\(--radix-popover-trigger-width\)\] {
464
- width: var(--radix-popover-trigger-width);
465
- }
466
463
  .w-fit {
467
464
  width: fit-content;
468
465
  }
@@ -478,12 +475,21 @@
478
475
  .w-large-4x {
479
476
  width: var(--spacing-large-4x);
480
477
  }
478
+ .max-w-\[var\(--radix-popover-content-available-width\)\] {
479
+ max-width: var(--radix-popover-content-available-width);
480
+ }
481
481
  .max-w-\[var\(--radix-popover-trigger-width\)\] {
482
482
  max-width: var(--radix-popover-trigger-width);
483
483
  }
484
+ .max-w-full {
485
+ max-width: 100%;
486
+ }
484
487
  .min-w-\[240px\] {
485
488
  min-width: 240px;
486
489
  }
490
+ .min-w-\[var\(--radix-popover-trigger-width\)\] {
491
+ min-width: var(--radix-popover-trigger-width);
492
+ }
487
493
  .flex-1 {
488
494
  flex: 1;
489
495
  }
@@ -535,9 +541,6 @@
535
541
  .overflow-hidden {
536
542
  overflow: hidden;
537
543
  }
538
- .overflow-x-auto {
539
- overflow-x: auto;
540
- }
541
544
  .overflow-y-auto {
542
545
  overflow-y: auto;
543
546
  }
@@ -683,9 +686,15 @@
683
686
  .bg-primary-idle {
684
687
  background-color: var(--color-primary-idle);
685
688
  }
689
+ .bg-success-idle {
690
+ background-color: var(--color-success-idle);
691
+ }
686
692
  .bg-transparent {
687
693
  background-color: transparent;
688
694
  }
695
+ .bg-warning-idle {
696
+ background-color: var(--color-warning-idle);
697
+ }
689
698
  .p-\[2px\] {
690
699
  padding: 2px;
691
700
  }
@@ -695,6 +704,9 @@
695
704
  .p-small-1x {
696
705
  padding: var(--spacing-small-1x);
697
706
  }
707
+ .p-small-2x {
708
+ padding: var(--spacing-small-2x);
709
+ }
698
710
  .px-large {
699
711
  padding-inline: var(--spacing-large);
700
712
  }
@@ -731,6 +743,9 @@
731
743
  .text-center {
732
744
  text-align: center;
733
745
  }
746
+ .text-left {
747
+ text-align: left;
748
+ }
734
749
  .font-inter {
735
750
  font-family: var(--font-inter);
736
751
  }
@@ -839,6 +854,9 @@
839
854
  .text-icon-neutral-3 {
840
855
  color: var(--color-icon-neutral-3);
841
856
  }
857
+ .text-inherit {
858
+ color: inherit;
859
+ }
842
860
  .text-neutral-dark {
843
861
  color: var(--color-neutral-dark);
844
862
  }
@@ -972,10 +990,6 @@
972
990
  --tw-duration: 100ms;
973
991
  transition-duration: 100ms;
974
992
  }
975
- .duration-150 {
976
- --tw-duration: 150ms;
977
- transition-duration: 150ms;
978
- }
979
993
  .duration-200 {
980
994
  --tw-duration: 200ms;
981
995
  transition-duration: 200ms;
@@ -1006,11 +1020,6 @@
1006
1020
  animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
1007
1021
  }
1008
1022
  }
1009
- .group-focus-within\:bg-layer-2-hover {
1010
- &:is(:where(.group):focus-within *) {
1011
- background-color: var(--color-layer-2-hover);
1012
- }
1013
- }
1014
1023
  .group-focus-within\:text-size-label-sm-1x {
1015
1024
  &:is(:where(.group):focus-within *) {
1016
1025
  font-size: var(--text-size-label-sm-1x);
@@ -1074,6 +1083,11 @@
1074
1083
  padding-left: var(--spacing-large-1x);
1075
1084
  }
1076
1085
  }
1086
+ .group-has-\[div\[data-slot\=date-picker-right-slot\]\]\:right-large-4x {
1087
+ &:is(:where(.group):has(*:is(div[data-slot=date-picker-right-slot])) *) {
1088
+ right: var(--spacing-large-4x);
1089
+ }
1090
+ }
1077
1091
  .group-has-\[div\[data-slot\=input-left-action-slot\]\]\:rounded-l-none {
1078
1092
  &:is(:where(.group):has(*:is(div[data-slot=input-left-action-slot])) *) {
1079
1093
  border-top-left-radius: 0;
@@ -1096,10 +1110,10 @@
1096
1110
  padding-left: var(--spacing-large-1x);
1097
1111
  }
1098
1112
  }
1099
- .group-has-\[div\[data-slot\=input-left-slot\]\]\:group-focus-within\:left-auto {
1113
+ .group-has-\[div\[data-slot\=input-left-slot\]\]\:group-focus-within\:left-small {
1100
1114
  &:is(:where(.group):has(*:is(div[data-slot=input-left-slot])) *) {
1101
1115
  &:is(:where(.group):focus-within *) {
1102
- left: auto;
1116
+ left: var(--spacing-small);
1103
1117
  }
1104
1118
  }
1105
1119
  }
@@ -1115,6 +1129,18 @@
1115
1129
  border-bottom-right-radius: var(--radius-none);
1116
1130
  }
1117
1131
  }
1132
+ .group-has-\[div\[data-slot\=input-right-slot\]\]\:right-large-4x {
1133
+ &:is(:where(.group):has(*:is(div[data-slot=input-right-slot])) *) {
1134
+ right: var(--spacing-large-4x);
1135
+ }
1136
+ }
1137
+ .group-has-\[div\[data-slot\=input-right-slot\]\]\:group-focus-within\:right-small {
1138
+ &:is(:where(.group):has(*:is(div[data-slot=input-right-slot])) *) {
1139
+ &:is(:where(.group):focus-within *) {
1140
+ right: var(--spacing-small);
1141
+ }
1142
+ }
1143
+ }
1118
1144
  .group-has-\[div\[data-slot\=select-left-slot\]\]\:left-large-4x {
1119
1145
  &:is(:where(.group):has(*:is(div[data-slot=select-left-slot])) *) {
1120
1146
  left: var(--spacing-large-4x);
@@ -1125,6 +1151,11 @@
1125
1151
  padding-left: var(--spacing-large-1x);
1126
1152
  }
1127
1153
  }
1154
+ .group-has-\[div\[data-slot\=select-right-slot\]\]\:right-large-4x {
1155
+ &:is(:where(.group):has(*:is(div[data-slot=select-right-slot])) *) {
1156
+ right: var(--spacing-large-4x);
1157
+ }
1158
+ }
1128
1159
  .group-has-\[input\:not\(\:placeholder-shown\)\]\:-top-\[3px\] {
1129
1160
  &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
1130
1161
  top: calc(3px * -1);
@@ -1135,11 +1166,6 @@
1135
1166
  animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
1136
1167
  }
1137
1168
  }
1138
- .group-has-\[input\:not\(\:placeholder-shown\)\]\:bg-layer-2-idle {
1139
- &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
1140
- background-color: var(--color-layer-2-idle);
1141
- }
1142
- }
1143
1169
  .group-has-\[input\:not\(\:placeholder-shown\)\]\:text-size-label-sm-1x {
1144
1170
  &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
1145
1171
  font-size: var(--text-size-label-sm-1x);
@@ -1157,24 +1183,45 @@
1157
1183
  color: var(--color-primary-idle);
1158
1184
  }
1159
1185
  }
1160
- .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:left-auto {
1186
+ .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:left-small {
1161
1187
  &:is(:where(.group):has(*:is(div[data-slot=date-picker-left-slot])) *) {
1162
1188
  &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
1163
- left: auto;
1189
+ left: var(--spacing-small);
1164
1190
  }
1165
1191
  }
1166
1192
  }
1167
- .group-has-\[div\[data-slot\=input-left-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:left-auto {
1193
+ .group-has-\[div\[data-slot\=date-picker-right-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:right-small {
1194
+ &:is(:where(.group):has(*:is(div[data-slot=date-picker-right-slot])) *) {
1195
+ &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
1196
+ right: var(--spacing-small);
1197
+ }
1198
+ }
1199
+ }
1200
+ .group-has-\[div\[data-slot\=input-left-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:left-small {
1168
1201
  &:is(:where(.group):has(*:is(div[data-slot=input-left-slot])) *) {
1169
1202
  &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
1170
- left: auto;
1203
+ left: var(--spacing-small);
1171
1204
  }
1172
1205
  }
1173
1206
  }
1174
- .group-has-\[div\[data-slot\=select-left-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:left-auto {
1207
+ .group-has-\[div\[data-slot\=input-right-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:right-small {
1208
+ &:is(:where(.group):has(*:is(div[data-slot=input-right-slot])) *) {
1209
+ &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
1210
+ right: var(--spacing-small);
1211
+ }
1212
+ }
1213
+ }
1214
+ .group-has-\[div\[data-slot\=select-left-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:left-small {
1175
1215
  &:is(:where(.group):has(*:is(div[data-slot=select-left-slot])) *) {
1176
1216
  &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
1177
- left: auto;
1217
+ left: var(--spacing-small);
1218
+ }
1219
+ }
1220
+ }
1221
+ .group-has-\[div\[data-slot\=select-right-slot\]\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:right-small {
1222
+ &:is(:where(.group):has(*:is(div[data-slot=select-right-slot])) *) {
1223
+ &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
1224
+ right: var(--spacing-small);
1178
1225
  }
1179
1226
  }
1180
1227
  }
@@ -1193,11 +1240,6 @@
1193
1240
  animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
1194
1241
  }
1195
1242
  }
1196
- .group-data-\[state\=open\]\:bg-layer-2-idle {
1197
- &:is(:where(.group)[data-state=open] *) {
1198
- background-color: var(--color-layer-2-idle);
1199
- }
1200
- }
1201
1243
  .group-data-\[state\=open\]\:text-size-label-sm-1x {
1202
1244
  &:is(:where(.group)[data-state=open] *) {
1203
1245
  font-size: var(--text-size-label-sm-1x);
@@ -1215,17 +1257,31 @@
1215
1257
  color: var(--color-primary-idle);
1216
1258
  }
1217
1259
  }
1218
- .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:group-data-\[state\=open\]\:left-auto {
1260
+ .group-has-\[div\[data-slot\=date-picker-left-slot\]\]\:group-data-\[state\=open\]\:left-small {
1219
1261
  &:is(:where(.group):has(*:is(div[data-slot=date-picker-left-slot])) *) {
1220
1262
  &:is(:where(.group)[data-state=open] *) {
1221
- left: auto;
1263
+ left: var(--spacing-small);
1264
+ }
1265
+ }
1266
+ }
1267
+ .group-has-\[div\[data-slot\=date-picker-right-slot\]\]\:group-data-\[state\=open\]\:right-small {
1268
+ &:is(:where(.group):has(*:is(div[data-slot=date-picker-right-slot])) *) {
1269
+ &:is(:where(.group)[data-state=open] *) {
1270
+ right: var(--spacing-small);
1222
1271
  }
1223
1272
  }
1224
1273
  }
1225
- .group-has-\[div\[data-slot\=select-left-slot\]\]\:group-data-\[state\=open\]\:left-auto {
1274
+ .group-has-\[div\[data-slot\=select-left-slot\]\]\:group-data-\[state\=open\]\:left-small {
1226
1275
  &:is(:where(.group):has(*:is(div[data-slot=select-left-slot])) *) {
1227
1276
  &:is(:where(.group)[data-state=open] *) {
1228
- left: auto;
1277
+ left: var(--spacing-small);
1278
+ }
1279
+ }
1280
+ }
1281
+ .group-has-\[div\[data-slot\=select-right-slot\]\]\:group-data-\[state\=open\]\:right-small {
1282
+ &:is(:where(.group):has(*:is(div[data-slot=select-right-slot])) *) {
1283
+ &:is(:where(.group)[data-state=open] *) {
1284
+ right: var(--spacing-small);
1229
1285
  }
1230
1286
  }
1231
1287
  }
@@ -1234,11 +1290,35 @@
1234
1290
  color: var(--color-danger-label-idle);
1235
1291
  }
1236
1292
  }
1293
+ .group-data-\[variant\=filled\]\:bg-layer-2-hover {
1294
+ &:is(:where(.group)[data-variant=filled] *) {
1295
+ background-color: var(--color-layer-2-hover);
1296
+ }
1297
+ }
1298
+ .group-data-\[variant\=filled\]\:group-focus-within\:bg-layer-2-hover {
1299
+ &:is(:where(.group)[data-variant=filled] *) {
1300
+ &:is(:where(.group):focus-within *) {
1301
+ background-color: var(--color-layer-2-hover);
1302
+ }
1303
+ }
1304
+ }
1237
1305
  .group-data-\[variant\=neutral\]\:text-icon-neutral-3 {
1238
1306
  &:is(:where(.group)[data-variant=neutral] *) {
1239
1307
  color: var(--color-icon-neutral-3);
1240
1308
  }
1241
1309
  }
1310
+ .group-data-\[variant\=outlined\]\:bg-layer-2-idle {
1311
+ &:is(:where(.group)[data-variant=outlined] *) {
1312
+ background-color: var(--color-layer-2-idle);
1313
+ }
1314
+ }
1315
+ .group-data-\[variant\=outlined\]\:group-focus-within\:bg-layer-2-idle {
1316
+ &:is(:where(.group)[data-variant=outlined] *) {
1317
+ &:is(:where(.group):focus-within *) {
1318
+ background-color: var(--color-layer-2-idle);
1319
+ }
1320
+ }
1321
+ }
1242
1322
  .group-data-\[variant\=primary\]\:text-primary-label-idle {
1243
1323
  &:is(:where(.group)[data-variant=primary] *) {
1244
1324
  color: var(--color-primary-label-idle);
@@ -1377,6 +1457,15 @@
1377
1457
  }
1378
1458
  }
1379
1459
  }
1460
+ .hover\:group-has-\[input\:not\(\:focus-within\)\]\:border-border-layer-3 {
1461
+ &:hover {
1462
+ @media (hover: hover) {
1463
+ &:is(:where(.group):has(*:is(input:not(:focus-within))) *) {
1464
+ border-color: var(--color-border-layer-3);
1465
+ }
1466
+ }
1467
+ }
1468
+ }
1380
1469
  .focus\:border-primary-idle {
1381
1470
  &:focus {
1382
1471
  border-color: var(--color-primary-idle);
@@ -1713,18 +1802,6 @@
1713
1802
  background-color: var(--color-alt-4);
1714
1803
  }
1715
1804
  }
1716
- .data-\[variant\=outlined\]\:bg-layer-2-idle {
1717
- &[data-variant=outlined] {
1718
- background-color: var(--color-layer-2-idle);
1719
- }
1720
- }
1721
- .data-\[variant\=outlined\]\:group-focus-within\:bg-layer-2-idle {
1722
- &[data-variant=outlined] {
1723
- &:is(:where(.group):focus-within *) {
1724
- background-color: var(--color-layer-2-idle);
1725
- }
1726
- }
1727
- }
1728
1805
  .data-\[variant\=outlined\]\:group-has-\[input\:not\(\:placeholder-shown\)\]\:text-primary-idle {
1729
1806
  &[data-variant=outlined] {
1730
1807
  &:is(:where(.group):has(*:is(input:not(:placeholder-shown))) *) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xjur-ui/react",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "type": "module",
5
5
  "description": "React components for XJur Design System",
6
6
  "main": "dist/index.js",
@@ -29,7 +29,8 @@
29
29
  "./date-picker": "./dist/components/date-picker.js",
30
30
  "./dropdown-menu": "./dist/components/dropdown-menu.js",
31
31
  "./divider": "./dist/components/divider.js",
32
- "./sheet": "./dist/components/sheet.js"
32
+ "./sheet": "./dist/components/sheet.js",
33
+ "./badge": "./dist/components/badge.js"
33
34
  },
34
35
  "dependencies": {
35
36
  "@radix-ui/react-avatar": "^1.1.10",
package/src/components/badge.tsx ADDED
@@ -0,0 +1,40 @@
1
+ import { cva, type ClassVariantProps, cx } from '@xjur-ui/util'
2
+ import { Typography } from './typography'
3
+
4
+ const badgeVariants = cva(
5
+ [
6
+ 'flex items-center justify-center size-large p-small-2x text-neutral-label rounded-circle'
7
+ ],
8
+ {
9
+ variants: {
10
+ variant: {
11
+ primary: 'bg-primary-idle',
12
+ secondary: 'bg-secondary-idle',
13
+ neutral: 'bg-alt-2-idle',
14
+ success: 'bg-success-idle',
15
+ warning: 'bg-warning-idle',
16
+ danger: 'bg-danger-idle'
17
+ }
18
+ },
19
+ defaultVariants: {
20
+ variant: 'neutral'
21
+ }
22
+ }
23
+ )
24
+
25
+ export function Badge({
26
+ variant = 'neutral',
27
+ children,
28
+ className
29
+ }: ClassVariantProps<typeof badgeVariants> & {
30
+ children: string
31
+ className?: string
32
+ }) {
33
+ return (
34
+ <span className={cx(badgeVariants({ variant }), className)}>
35
+ <Typography className="text-inherit" size="sm-2x" variant="label">
36
+ {children}
37
+ </Typography>
38
+ </span>
39
+ )
40
+ }
package/src/components/date-picker.tsx CHANGED
@@ -41,7 +41,7 @@ export function DatePickerContent({
41
41
  align={align}
42
42
  className={cx(
43
43
  className,
44
- 'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)]'
44
+ 'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'
45
45
  )}
46
46
  side={side}
47
47
  sideOffset={sideOffset}
@@ -88,25 +88,27 @@ export function DatePickerLabel({
88
88
  <Typography
89
89
  asChild={true}
90
90
  className={cx(
91
- 'bg-layer-2-idle w-fit font-normal',
92
- 'pointer-events-none absolute top-[50%] left-auto -translate-y-1/2',
93
- 'ease pointer-events-none transition-all duration-150',
91
+ 'inline-block max-w-full truncate text-left font-normal',
92
+ 'left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2',
93
+ 'ease transition-all duration-250',
94
94
  // Content Open
95
95
  'group-data-[state=open]:text-primary-idle',
96
- 'group-data-[state=open]:bg-layer-2-idle',
97
96
  'group-data-[state=open]:-top-[3px]',
98
97
  'group-data-[state=open]:text-size-label-sm-1x',
99
98
  'group-data-[state=open]:font-medium',
100
99
  // Filled
101
100
  'group-has-[input:not(:placeholder-shown)]:text-primary-idle',
102
- 'group-has-[input:not(:placeholder-shown)]:bg-layer-2-idle',
103
101
  'group-has-[input:not(:placeholder-shown)]:-top-[3px]',
104
102
  'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',
105
103
  'group-has-[input:not(:placeholder-shown)]:font-medium',
106
104
  // If has left slot
107
105
  'group-has-[div[data-slot=date-picker-left-slot]]:left-large-4x',
108
- 'group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-auto',
109
- 'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto',
106
+ 'group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small',
107
+ 'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
108
+ // If has right slot
109
+ 'group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x',
110
+ 'group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small',
111
+ 'group-has-[div[data-slot=date-picker-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
110
112
  // Animate
111
113
  'group-data-[state=open]:animate-in',
112
114
  'group-data-[state=closed]:animate-out',
@@ -116,7 +118,11 @@ export function DatePickerLabel({
116
118
  weight="medium"
117
119
  {...props}
118
120
  >
119
- <label htmlFor={htmlFor}>{children}</label>
121
+ <label htmlFor={htmlFor}>
122
+ <span className="bg-layer-2-idle rounded-small-1x max-w-full">
123
+ {children}
124
+ </span>
125
+ </label>
120
126
  </Typography>
121
127
  )
122
128
  }
package/src/components/input.tsx CHANGED
@@ -52,7 +52,7 @@ export function InputContent({ className, ...props }: ComponentProps<'div'>) {
52
52
  variant: {
53
53
  default: '',
54
54
  outlined:
55
- 'bg-layer-2-idle border-border-layer-2 border hover:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle',
55
+ 'bg-layer-2-idle border-border-layer-2 border hover:group-has-[input:not(:focus-within)]:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle',
56
56
  filled:
57
57
  'bg-layer-2-hover group-hover:border-border-layer-1 group-hover:border-1'
58
58
  }
@@ -74,6 +74,7 @@ export function InputContent({ className, ...props }: ComponentProps<'div'>) {
74
74
  export function InputLabel({
75
75
  htmlFor,
76
76
  className,
77
+ children,
77
78
  ...props
78
79
  }: ComponentProps<'label'> & { htmlFor: string }) {
79
80
  return (
@@ -82,10 +83,10 @@ export function InputLabel({
82
83
  return (
83
84
  <label
84
85
  className={cx(
85
- 'rounded-small-1x text-size-body-md text-neutral-dark data-[variant=outlined]:bg-layer-2-idle bg-layer-2-hover w-fit font-normal',
86
- 'ease animate-in pointer-events-none absolute top-1/2 left-auto -translate-y-1/2 transition-all duration-250',
86
+ 'group text-size-body-md text-neutral-dark inline-block max-w-full truncate text-left',
87
+ 'ease animate-in left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2 transition-all duration-250',
87
88
  // Filled
88
- 'group-focus-within:text-primary-idle group-focus-within:bg-layer-2-hover data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-focus-within:-top-[3px]',
89
+ 'group-focus-within:text-primary-idle group-focus-within:-top-[3px]',
89
90
  'group-focus-within:text-size-label-sm-1x group-focus-within:font-medium',
90
91
  'group-has-[input:not(:placeholder-shown)]:-top-[3px]',
91
92
  'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',
@@ -93,8 +94,12 @@ export function InputLabel({
93
94
  'data-[variant=outlined]:group-has-[input:not(:placeholder-shown)]:text-primary-idle',
94
95
  // If has left slot
95
96
  'group-has-[div[data-slot=input-left-slot]]:left-large-4x',
96
- 'group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-auto',
97
- 'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto',
97
+ 'group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-small',
98
+ 'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
99
+ // If has right slot
100
+ 'group-has-[div[data-slot=input-right-slot]]:right-large-4x',
101
+ 'group-has-[div[data-slot=input-right-slot]]:group-focus-within:right-small',
102
+ 'group-has-[div[data-slot=input-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
98
103
  // Animate
99
104
  'group-focus-within:animate-in',
100
105
  'group-has-[input:not(:placeholder-shown)]:animate-out',
@@ -103,7 +108,17 @@ export function InputLabel({
103
108
  data-variant={variant}
104
109
  htmlFor={htmlFor}
105
110
  {...props}
106
- />
111
+ >
112
+ <span
113
+ className={cx(
114
+ 'rounded-small-1x max-w-full',
115
+ 'group-data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-data-[variant=filled]:group-focus-within:bg-layer-2-hover',
116
+ 'group-data-[variant=outlined]:bg-layer-2-idle group-data-[variant=filled]:bg-layer-2-hover'
117
+ )}
118
+ >
119
+ {children}
120
+ </span>
121
+ </label>
107
122
  )
108
123
  }}
109
124
  </FieldContext.Consumer>
package/src/components/select.tsx CHANGED
@@ -54,7 +54,7 @@ export function SelectContent({
54
54
  align={align}
55
55
  className={cx(
56
56
  className,
57
- 'group z-10 max-h-[var(--radix-popover-content-available-height)] w-[var(--radix-popover-trigger-width)]'
57
+ 'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'
58
58
  )}
59
59
  side={side}
60
60
  sideOffset={sideOffset}
@@ -101,7 +101,7 @@ export function SelectMultiValue({
101
101
  <div
102
102
  className={cx(
103
103
  className,
104
- 'gap-small-1x scrollbar-hide group-has-[div[data-slot=select-left-slot]]:pl-large-1x flex overflow-x-auto'
104
+ 'gap-small-1x scrollbar-hide group-has-[div[data-slot=select-left-slot]]:pl-large-1x overflow-x-small flex'
105
105
  )}
106
106
  {...props}
107
107
  >
@@ -129,25 +129,27 @@ export function SelectLabel({
129
129
  <Typography
130
130
  asChild={true}
131
131
  className={cx(
132
- 'bg-layer-2-idle w-fit font-normal',
133
- 'pointer-events-none absolute top-1/2 left-auto -translate-y-1/2',
132
+ 'inline-block max-w-full truncate text-left font-normal',
133
+ 'left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2',
134
134
  'ease transition-all duration-250',
135
135
  // Content Open
136
136
  'group-data-[state=open]:text-primary-idle',
137
- 'group-data-[state=open]:bg-layer-2-idle',
138
137
  'group-data-[state=open]:-top-[3px]',
139
138
  'group-data-[state=open]:text-size-label-sm-1x',
140
139
  'group-data-[state=open]:font-medium',
141
140
  // Filled
142
141
  'group-has-[input:not(:placeholder-shown)]:text-primary-idle',
143
- 'group-has-[input:not(:placeholder-shown)]:bg-layer-2-idle',
144
142
  'group-has-[input:not(:placeholder-shown)]:-top-[3px]',
145
143
  'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',
146
144
  'group-has-[input:not(:placeholder-shown)]:font-medium',
147
145
  // If has left slot
148
146
  'group-has-[div[data-slot=select-left-slot]]:left-large-4x',
149
- 'group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-auto',
150
- 'group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto',
147
+ 'group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-small',
148
+ 'group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
149
+ // If has right slot
150
+ 'group-has-[div[data-slot=select-right-slot]]:right-large-4x',
151
+ 'group-has-[div[data-slot=select-right-slot]]:group-data-[state=open]:right-small',
152
+ 'group-has-[div[data-slot=select-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
151
153
  // Animate
152
154
  'group-data-[state=open]:animate-in',
153
155
  'group-data-[state=closed]:animate-out',
@@ -157,7 +159,11 @@ export function SelectLabel({
157
159
  weight="medium"
158
160
  {...props}
159
161
  >
160
- <label htmlFor={htmlFor}>{children}</label>
162
+ <label htmlFor={htmlFor}>
163
+ <span className="bg-layer-2-idle rounded-small-1x max-w-full">
164
+ {children}
165
+ </span>
166
+ </label>
161
167
  </Typography>
162
168
  )
163
169
  }
package/src/resources/icons.ts CHANGED
@@ -138,7 +138,9 @@ export const icons = [
138
138
  'event',
139
139
  'account_circle',
140
140
  'history',
141
- 'security'
141
+ 'security',
142
+ 'bar_chart',
143
+ 'category'
142
144
  ] as const
143
145
 
144
146
  export type IconType = (typeof icons)[number]