@giddaa-housing/ui 1.2.0 → 2.0.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.
Files changed (15) hide show
  1. package/css/generated/shared.css +1 -1
  2. package/dist/badge.js +1 -1
  3. package/dist/dialog-nesting.d.ts +9 -0
  4. package/dist/dialog-nesting.js +27 -0
  5. package/dist/dialog.js +9 -5
  6. package/dist/file-upload.d.ts +43 -0
  7. package/dist/file-upload.js +154 -0
  8. package/dist/input-otp.d.ts +23 -0
  9. package/dist/input-otp.js +56 -0
  10. package/dist/sheet.d.ts +4 -2
  11. package/dist/sheet.js +22 -11
  12. package/dist/styles.css +326 -100
  13. package/dist/tabs.d.ts +10 -4
  14. package/dist/tabs.js +14 -10
  15. package/package.json +9 -1
package/dist/tabs.d.ts CHANGED
@@ -4,19 +4,25 @@ import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
4
4
  //#region src/tabs.d.ts
5
5
  type TabsListVariant = "default" | "line" | "secondary" | "underline";
6
6
  declare function Tabs({ className, orientation, size, ...props }: Tabs$1.Root.Props & {
7
+ /**
8
+ * @deprecated Pass `size` to `TabsList` instead — the root is
9
+ * orchestration-only and doesn't render the triggers it used to size.
10
+ * Forwarded through context for now; removed in the next major.
11
+ */
7
12
  size?: ComponentSize;
8
13
  }): import("react").JSX.Element;
9
14
  declare const tabsListVariants: (props?: ({
10
15
  variant?: "secondary" | "underline" | null | undefined;
11
16
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
12
- declare function TabsList({ className, variant, children, ...props }: Tabs$1.List.Props & {
17
+ declare function TabsList({ className, variant, size, children, ...props }: Tabs$1.List.Props & {
13
18
  variant?: TabsListVariant;
19
+ size?: ComponentSize;
14
20
  }): import("react").JSX.Element;
15
21
  /**
16
22
  * Trigger styling, exported so recipes (e.g. an overflow "More" button that
17
- * isn't a real tab) can render the same look. Reads `variant` off the parent
18
- * `group/tabs-list` and `size` off the ancestor `group/tabs`, so it stays in
19
- * sync wherever it lives inside a `Tabs` tree.
23
+ * isn't a real tab) can render the same look. Reads both `variant` and `size`
24
+ * off the parent `group/tabs-list`, so it stays in sync wherever it lives
25
+ * inside a `Tabs` tree.
20
26
  */
21
27
  declare const tabsTriggerClassName: string;
22
28
  declare function TabsTrigger({ className, nativeButton, ...props }: Tabs$1.Tab.Props): import("react").JSX.Element;
package/dist/tabs.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { t as cn } from "./cn-BI_4DMBf.js";
3
- import { useComponentSize } from "./size-context.js";
3
+ import { SizeProvider, useComponentSize } from "./size-context.js";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { cva } from "class-variance-authority";
6
6
  import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
@@ -13,14 +13,16 @@ function resolveTabsListVariant(variant) {
13
13
  return variant === "default" ? "secondary" : variant === "line" ? "underline" : variant;
14
14
  }
15
15
  function Tabs({ className, orientation = "horizontal", size, ...props }) {
16
- const resolvedSize = useComponentSize(size);
17
- return /* @__PURE__ */ jsx(Tabs$1.Root, {
16
+ const root = /* @__PURE__ */ jsx(Tabs$1.Root, {
18
17
  "data-slot": "tabs",
19
18
  "data-orientation": orientation,
20
- "data-size": resolvedSize,
21
19
  className: cn("group/tabs flex gap-3 data-[orientation=horizontal]:flex-col", className),
22
20
  ...props
23
21
  });
22
+ return size ? /* @__PURE__ */ jsx(SizeProvider, {
23
+ size,
24
+ children: root
25
+ }) : root;
24
26
  }
25
27
  const tabsListVariants = cva(cn("group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary", "group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle", "group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle"), {
26
28
  variants: { variant: {
@@ -29,11 +31,13 @@ const tabsListVariants = cva(cn("group/tabs-list relative inline-flex w-fit shri
29
31
  } },
30
32
  defaultVariants: { variant: "underline" }
31
33
  });
32
- function TabsList({ className, variant = "underline", children, ...props }) {
34
+ function TabsList({ className, variant = "underline", size, children, ...props }) {
33
35
  const resolvedVariant = resolveTabsListVariant(variant);
36
+ const resolvedSize = useComponentSize(size);
34
37
  return /* @__PURE__ */ jsxs(Tabs$1.List, {
35
38
  "data-slot": "tabs-list",
36
39
  "data-variant": resolvedVariant,
40
+ "data-size": resolvedSize,
37
41
  className: cn(tabsListVariants({ variant: resolvedVariant }), className),
38
42
  ...props,
39
43
  children: [children, /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: cn("pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out", "group-data-[variant=secondary]/tabs-list:hidden", "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none", "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0", "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0") })]
@@ -41,11 +45,11 @@ function TabsList({ className, variant = "underline", children, ...props }) {
41
45
  }
42
46
  /**
43
47
  * Trigger styling, exported so recipes (e.g. an overflow "More" button that
44
- * isn't a real tab) can render the same look. Reads `variant` off the parent
45
- * `group/tabs-list` and `size` off the ancestor `group/tabs`, so it stays in
46
- * sync wherever it lives inside a `Tabs` tree.
48
+ * isn't a real tab) can render the same look. Reads both `variant` and `size`
49
+ * off the parent `group/tabs-list`, so it stays in sync wherever it lives
50
+ * inside a `Tabs` tree.
47
51
  */
48
- const tabsTriggerClassName = cn("group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow]", "focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current", "group-data-[size=sm]/tabs:text-gdt-xs group-data-[size=sm]/tabs:[&_svg:not([class*='size-'])]:size-3.5", "group-data-[size=md]/tabs:text-gdt-sm group-data-[size=md]/tabs:[&_svg:not([class*='size-'])]:size-4", "group-data-[size=lg]/tabs:text-gdt-md group-data-[size=lg]/tabs:[&_svg:not([class*='size-'])]:size-4.5", "group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs:px-3 group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs:py-1", "group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs:px-3.5 group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs:py-1.5", "group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs:px-4 group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs:px-3 group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs:py-1", "group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs:px-3.5 group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs:px-4 group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs:py-2", "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary", "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand");
52
+ const tabsTriggerClassName = cn("group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow]", "focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current", "group-data-[size=sm]/tabs-list:text-gdt-xs group-data-[size=sm]/tabs-list:[&_svg:not([class*='size-'])]:size-3.5", "group-data-[size=md]/tabs-list:text-gdt-sm group-data-[size=md]/tabs-list:[&_svg:not([class*='size-'])]:size-4", "group-data-[size=lg]/tabs-list:text-gdt-md group-data-[size=lg]/tabs-list:[&_svg:not([class*='size-'])]:size-4.5", "group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:px-3 group-data-[variant=underline]/tabs-list:group-data-[size=sm]/tabs-list:py-1", "group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:px-3.5 group-data-[variant=underline]/tabs-list:group-data-[size=md]/tabs-list:py-1.5", "group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:group-data-[size=lg]/tabs-list:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs-list:px-3 group-data-[variant=secondary]/tabs-list:group-data-[size=sm]/tabs-list:py-1", "group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs-list:px-3.5 group-data-[variant=secondary]/tabs-list:group-data-[size=md]/tabs-list:py-1.5", "group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:group-data-[size=lg]/tabs-list:py-2", "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary", "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand");
49
53
  function TabsTrigger({ className, nativeButton = true, ...props }) {
50
54
  return /* @__PURE__ */ jsx(Tabs$1.Tab, {
51
55
  "data-slot": "tabs-trigger",
@@ -95,7 +99,7 @@ function TabsCount({ className, count, abbreviate, max, loading, children, ...pr
95
99
  "data-slot": "tabs-count",
96
100
  "data-loading": loading || void 0,
97
101
  "aria-busy": loading || void 0,
98
- className: cn("inline-flex items-center justify-center rounded-full font-semibold leading-none transition-[background-color,color]", "group-data-[size=sm]/tabs:h-4 group-data-[size=sm]/tabs:min-w-4 group-data-[size=sm]/tabs:px-1 group-data-[size=sm]/tabs:text-[10px]", "group-data-[size=md]/tabs:h-5 group-data-[size=md]/tabs:min-w-5 group-data-[size=md]/tabs:px-1 group-data-[size=md]/tabs:text-[11px]", "group-data-[size=lg]/tabs:h-5 group-data-[size=lg]/tabs:min-w-5 group-data-[size=lg]/tabs:px-1.5 group-data-[size=lg]/tabs:text-gdt-xs", "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "data-loading:animate-pulse", className),
102
+ className: cn("inline-flex items-center justify-center rounded-full font-semibold leading-none transition-[background-color,color]", "group-data-[size=sm]/tabs-list:h-4 group-data-[size=sm]/tabs-list:min-w-4 group-data-[size=sm]/tabs-list:px-1 group-data-[size=sm]/tabs-list:text-[10px]", "group-data-[size=md]/tabs-list:h-5 group-data-[size=md]/tabs-list:min-w-5 group-data-[size=md]/tabs-list:px-1 group-data-[size=md]/tabs-list:text-[11px]", "group-data-[size=lg]/tabs-list:h-5 group-data-[size=lg]/tabs-list:min-w-5 group-data-[size=lg]/tabs-list:px-1.5 group-data-[size=lg]/tabs-list:text-gdt-xs", "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand", "data-loading:animate-pulse", className),
99
103
  ...props,
100
104
  children: content
101
105
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@giddaa-housing/ui",
3
- "version": "1.2.0",
3
+ "version": "2.0.0",
4
4
  "description": "Giddaa reusable UI component library.",
5
5
  "type": "module",
6
6
  "private": false,
@@ -137,6 +137,10 @@
137
137
  "types": "./dist/filter.d.ts",
138
138
  "import": "./dist/filter.js"
139
139
  },
140
+ "./file-upload": {
141
+ "types": "./dist/file-upload.d.ts",
142
+ "import": "./dist/file-upload.js"
143
+ },
140
144
  "./footer": {
141
145
  "types": "./dist/footer.d.ts",
142
146
  "import": "./dist/footer.js"
@@ -165,6 +169,10 @@
165
169
  "types": "./dist/input-group.d.ts",
166
170
  "import": "./dist/input-group.js"
167
171
  },
172
+ "./input-otp": {
173
+ "types": "./dist/input-otp.d.ts",
174
+ "import": "./dist/input-otp.js"
175
+ },
168
176
  "./input-size-context": {
169
177
  "types": "./dist/input-size-context.d.ts",
170
178
  "import": "./dist/input-size-context.js"