@journ/bloom 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN.md +287 -0
- package/LICENSE +21 -0
- package/README.md +59 -0
- package/dist/accordion-parts.d.ts +9 -0
- package/dist/accordion-parts.js +37 -0
- package/dist/accordion.d.ts +10 -0
- package/dist/accordion.js +10 -0
- package/dist/alert-dialog-parts.d.ts +16 -0
- package/dist/alert-dialog-parts.js +33 -0
- package/dist/alert-dialog.d.ts +15 -0
- package/dist/alert-dialog.js +15 -0
- package/dist/alert.d.ts +48 -0
- package/dist/alert.js +51 -0
- package/dist/animated-size.d.ts +6 -0
- package/dist/animated-size.js +12 -0
- package/dist/avatar-parts.d.ts +10 -0
- package/dist/avatar-parts.js +20 -0
- package/dist/avatar.d.ts +9 -0
- package/dist/avatar.js +9 -0
- package/dist/badge.d.ts +38 -0
- package/dist/badge.js +22 -0
- package/dist/breadcrumbs.d.ts +18 -0
- package/dist/breadcrumbs.js +44 -0
- package/dist/bulk-bar.d.ts +13 -0
- package/dist/bulk-bar.js +27 -0
- package/dist/button.d.ts +40 -0
- package/dist/button.js +41 -0
- package/dist/calendar-parts.d.ts +17 -0
- package/dist/calendar-parts.js +90 -0
- package/dist/calendar.d.ts +17 -0
- package/dist/calendar.js +17 -0
- package/dist/card.d.ts +51 -0
- package/dist/card.js +63 -0
- package/dist/carousel-parts.d.ts +13 -0
- package/dist/carousel-parts.js +53 -0
- package/dist/carousel.d.ts +11 -0
- package/dist/carousel.js +11 -0
- package/dist/checkbox-parts.d.ts +8 -0
- package/dist/checkbox-parts.js +21 -0
- package/dist/checkbox.d.ts +8 -0
- package/dist/checkbox.js +8 -0
- package/dist/chip.d.ts +45 -0
- package/dist/chip.js +55 -0
- package/dist/collapsible-parts.d.ts +8 -0
- package/dist/collapsible-parts.js +22 -0
- package/dist/collapsible.d.ts +9 -0
- package/dist/collapsible.js +9 -0
- package/dist/combobox-parts.d.ts +22 -0
- package/dist/combobox-parts.js +54 -0
- package/dist/combobox.d.ts +26 -0
- package/dist/combobox.js +21 -0
- package/dist/command-palette-parts.d.ts +13 -0
- package/dist/command-palette-parts.js +19 -0
- package/dist/command-palette.d.ts +17 -0
- package/dist/command-palette.js +17 -0
- package/dist/composer.d.ts +12 -0
- package/dist/composer.js +21 -0
- package/dist/context-menu-parts.d.ts +15 -0
- package/dist/context-menu-parts.js +10 -0
- package/dist/context-menu.d.ts +20 -0
- package/dist/context-menu.js +13 -0
- package/dist/currency-input-parts.d.ts +8 -0
- package/dist/currency-input-parts.js +13 -0
- package/dist/currency-input.d.ts +8 -0
- package/dist/currency-input.js +8 -0
- package/dist/data-table-parts.d.ts +10 -0
- package/dist/data-table-parts.js +65 -0
- package/dist/data-table.d.ts +12 -0
- package/dist/data-table.js +12 -0
- package/dist/date-input-parts.d.ts +7 -0
- package/dist/date-input-parts.js +12 -0
- package/dist/date-input.d.ts +8 -0
- package/dist/date-input.js +8 -0
- package/dist/date-picker-parts.d.ts +11 -0
- package/dist/date-picker-parts.js +8 -0
- package/dist/date-picker.d.ts +20 -0
- package/dist/date-picker.js +15 -0
- package/dist/date-range-picker-parts.d.ts +11 -0
- package/dist/date-range-picker-parts.js +8 -0
- package/dist/date-range-picker.d.ts +20 -0
- package/dist/date-range-picker.js +15 -0
- package/dist/description-list.d.ts +12 -0
- package/dist/description-list.js +23 -0
- package/dist/dialog-parts.d.ts +15 -0
- package/dist/dialog-parts.js +32 -0
- package/dist/dialog.d.ts +15 -0
- package/dist/dialog.js +15 -0
- package/dist/divider.d.ts +6 -0
- package/dist/divider.js +12 -0
- package/dist/drawer-parts.d.ts +13 -0
- package/dist/drawer-parts.js +31 -0
- package/dist/drawer.d.ts +15 -0
- package/dist/drawer.js +15 -0
- package/dist/dropdown-menu-parts.d.ts +15 -0
- package/dist/dropdown-menu-parts.js +10 -0
- package/dist/dropdown-menu.d.ts +20 -0
- package/dist/dropdown-menu.js +13 -0
- package/dist/empty-state.d.ts +16 -0
- package/dist/empty-state.js +40 -0
- package/dist/field-parts.d.ts +10 -0
- package/dist/field-parts.js +25 -0
- package/dist/field.d.ts +11 -0
- package/dist/field.js +11 -0
- package/dist/file-dropzone-parts.d.ts +12 -0
- package/dist/file-dropzone-parts.js +32 -0
- package/dist/file-dropzone.d.ts +10 -0
- package/dist/file-dropzone.js +10 -0
- package/dist/heading.d.ts +31 -0
- package/dist/heading.js +26 -0
- package/dist/hover-card-parts.d.ts +8 -0
- package/dist/hover-card-parts.js +20 -0
- package/dist/hover-card.d.ts +9 -0
- package/dist/hover-card.js +9 -0
- package/dist/icon-button.d.ts +44 -0
- package/dist/icon-button.js +39 -0
- package/dist/icon.d.ts +30 -0
- package/dist/icon.js +27 -0
- package/dist/index.d.ts +96 -0
- package/dist/index.js +89 -0
- package/dist/input.d.ts +7 -0
- package/dist/input.js +14 -0
- package/dist/lib/cn.d.ts +6 -0
- package/dist/lib/cn.js +7 -0
- package/dist/lib/icon-tile.d.ts +32 -0
- package/dist/lib/icon-tile.js +23 -0
- package/dist/lib/interactive.d.ts +11 -0
- package/dist/lib/interactive.js +19 -0
- package/dist/lib/menu-parts.d.ts +25 -0
- package/dist/lib/menu-parts.js +41 -0
- package/dist/lib/modal-content.d.ts +10 -0
- package/dist/lib/modal-content.js +17 -0
- package/dist/lib/modal-parts.d.ts +7 -0
- package/dist/lib/modal-parts.js +15 -0
- package/dist/lib/overlay.d.ts +41 -0
- package/dist/lib/overlay.js +22 -0
- package/dist/lib/picker.d.ts +18 -0
- package/dist/lib/picker.js +25 -0
- package/dist/lib/text-styles.d.ts +25 -0
- package/dist/lib/text-styles.js +25 -0
- package/dist/lib/theme.d.ts +43 -0
- package/dist/lib/theme.js +45 -0
- package/dist/lib/tones.d.ts +52 -0
- package/dist/lib/tones.js +55 -0
- package/dist/lib/tv.d.ts +2 -0
- package/dist/lib/tv.js +2 -0
- package/dist/lib/use-enter.d.ts +15 -0
- package/dist/lib/use-enter.js +54 -0
- package/dist/link.d.ts +8 -0
- package/dist/link.js +13 -0
- package/dist/markdown.d.ts +10 -0
- package/dist/markdown.js +70 -0
- package/dist/message.d.ts +15 -0
- package/dist/message.js +25 -0
- package/dist/month-picker-parts.d.ts +2 -0
- package/dist/month-picker-parts.js +3 -0
- package/dist/month-picker.d.ts +15 -0
- package/dist/month-picker.js +15 -0
- package/dist/month-stepper-parts.d.ts +11 -0
- package/dist/month-stepper-parts.js +37 -0
- package/dist/month-stepper.d.ts +10 -0
- package/dist/month-stepper.js +10 -0
- package/dist/multiple-selector-parts.d.ts +18 -0
- package/dist/multiple-selector-parts.js +28 -0
- package/dist/multiple-selector.d.ts +28 -0
- package/dist/multiple-selector.js +23 -0
- package/dist/nav-bar.d.ts +10 -0
- package/dist/nav-bar.js +23 -0
- package/dist/navigation-menu-parts.d.ts +12 -0
- package/dist/navigation-menu-parts.js +47 -0
- package/dist/navigation-menu.d.ts +12 -0
- package/dist/navigation-menu.js +12 -0
- package/dist/otp-input-parts.d.ts +8 -0
- package/dist/otp-input-parts.js +17 -0
- package/dist/otp-input.d.ts +9 -0
- package/dist/otp-input.js +9 -0
- package/dist/page-header.d.ts +12 -0
- package/dist/page-header.js +23 -0
- package/dist/page.d.ts +45 -0
- package/dist/page.js +41 -0
- package/dist/pagination.d.ts +18 -0
- package/dist/pagination.js +49 -0
- package/dist/pill-select.d.ts +5 -0
- package/dist/pill-select.js +21 -0
- package/dist/popover-parts.d.ts +9 -0
- package/dist/popover-parts.js +21 -0
- package/dist/popover.d.ts +10 -0
- package/dist/popover.js +10 -0
- package/dist/portal.d.ts +2 -0
- package/dist/portal.js +2 -0
- package/dist/progress-parts.d.ts +38 -0
- package/dist/progress-parts.js +25 -0
- package/dist/progress.d.ts +8 -0
- package/dist/progress.js +8 -0
- package/dist/quantity-input-parts.d.ts +11 -0
- package/dist/quantity-input-parts.js +36 -0
- package/dist/quantity-input.d.ts +10 -0
- package/dist/quantity-input.js +10 -0
- package/dist/radio-parts.d.ts +7 -0
- package/dist/radio-parts.js +19 -0
- package/dist/radio.d.ts +8 -0
- package/dist/radio.js +8 -0
- package/dist/scroll-area-parts.d.ts +9 -0
- package/dist/scroll-area-parts.js +23 -0
- package/dist/scroll-area.d.ts +10 -0
- package/dist/scroll-area.js +10 -0
- package/dist/select-parts.d.ts +13 -0
- package/dist/select-parts.js +46 -0
- package/dist/select.d.ts +14 -0
- package/dist/select.js +14 -0
- package/dist/sheet-parts.d.ts +33 -0
- package/dist/sheet-parts.js +41 -0
- package/dist/sheet.d.ts +16 -0
- package/dist/sheet.js +16 -0
- package/dist/sidebar.d.ts +24 -0
- package/dist/sidebar.js +58 -0
- package/dist/skeleton.d.ts +5 -0
- package/dist/skeleton.js +11 -0
- package/dist/slider-parts.d.ts +9 -0
- package/dist/slider-parts.js +26 -0
- package/dist/slider.d.ts +10 -0
- package/dist/slider.js +10 -0
- package/dist/spinner.d.ts +5 -0
- package/dist/spinner.js +10 -0
- package/dist/stack-parts.d.ts +39 -0
- package/dist/stack-parts.js +35 -0
- package/dist/stack.d.ts +10 -0
- package/dist/stack.js +10 -0
- package/dist/stat.d.ts +14 -0
- package/dist/stat.js +29 -0
- package/dist/step-button.d.ts +10 -0
- package/dist/step-button.js +14 -0
- package/dist/stepper-parts.d.ts +10 -0
- package/dist/stepper-parts.js +33 -0
- package/dist/stepper.d.ts +11 -0
- package/dist/stepper.js +11 -0
- package/dist/styles.css +2 -0
- package/dist/switch-parts.d.ts +7 -0
- package/dist/switch-parts.js +19 -0
- package/dist/switch.d.ts +8 -0
- package/dist/switch.js +8 -0
- package/dist/table.d.ts +20 -0
- package/dist/table.js +48 -0
- package/dist/tabs-parts.d.ts +9 -0
- package/dist/tabs-parts.js +25 -0
- package/dist/tabs.d.ts +10 -0
- package/dist/tabs.js +10 -0
- package/dist/tag-input-parts.d.ts +15 -0
- package/dist/tag-input-parts.js +24 -0
- package/dist/tag-input.d.ts +10 -0
- package/dist/tag-input.js +10 -0
- package/dist/text-morph.d.ts +6 -0
- package/dist/text-morph.js +14 -0
- package/dist/text-shimmer.d.ts +9 -0
- package/dist/text-shimmer.js +12 -0
- package/dist/text.d.ts +38 -0
- package/dist/text.js +32 -0
- package/dist/textarea.d.ts +5 -0
- package/dist/textarea.js +12 -0
- package/dist/time-range-parts.d.ts +10 -0
- package/dist/time-range-parts.js +22 -0
- package/dist/time-range.d.ts +10 -0
- package/dist/time-range.js +10 -0
- package/dist/toast-parts.d.ts +11 -0
- package/dist/toast-parts.js +39 -0
- package/dist/toast.d.ts +13 -0
- package/dist/toast.js +12 -0
- package/dist/toggle-group-parts.d.ts +7 -0
- package/dist/toggle-group-parts.js +17 -0
- package/dist/toggle-group.d.ts +8 -0
- package/dist/toggle-group.js +8 -0
- package/dist/tokens.css +64 -0
- package/dist/tooltip-parts.d.ts +9 -0
- package/dist/tooltip-parts.js +21 -0
- package/dist/tooltip.d.ts +10 -0
- package/dist/tooltip.js +10 -0
- package/dist/touch-target.d.ts +7 -0
- package/dist/touch-target.js +10 -0
- package/package.json +71 -0
package/dist/field.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Description, Error as FieldError, Label, Root } from "./field-parts.js";
|
|
2
|
+
//#region src/field.d.ts
|
|
3
|
+
declare const Field: {
|
|
4
|
+
Root: typeof Root;
|
|
5
|
+
Label: typeof Label;
|
|
6
|
+
Description: typeof Description;
|
|
7
|
+
Error: typeof FieldError;
|
|
8
|
+
Control: any;
|
|
9
|
+
};
|
|
10
|
+
//#endregion
|
|
11
|
+
export { Field };
|
package/dist/field.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ComponentPropsWithRef } from "react";
|
|
2
|
+
import * as Nude from "@journ/nude/file-dropzone-parts";
|
|
3
|
+
import { FileRejection, RejectionReason } from "@journ/nude/file-dropzone-parts";
|
|
4
|
+
//#region src/file-dropzone-parts.d.ts
|
|
5
|
+
declare const matchesAccept: any, sortFiles: any;
|
|
6
|
+
/** A drop target that is also a button: click or press Enter to open the file picker. */
|
|
7
|
+
declare const Root: ({ className, ...props }: Nude.RootProps) => import("react").JSX.Element;
|
|
8
|
+
declare const Icon: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
|
|
9
|
+
declare const Title: ({ className, ...props }: ComponentPropsWithRef<'p'>) => import("react").JSX.Element;
|
|
10
|
+
declare const Description: ({ className, ...props }: ComponentPropsWithRef<'p'>) => import("react").JSX.Element;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { Description, type FileRejection, Icon, type RejectionReason, Root, Title, matchesAccept, sortFiles };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "./lib/cn.js";
|
|
3
|
+
import { mutedText } from "./lib/text-styles.js";
|
|
4
|
+
import { iconTile } from "./lib/icon-tile.js";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import * as Nude from "@journ/nude/file-dropzone-parts";
|
|
7
|
+
//#region src/file-dropzone-parts.tsx
|
|
8
|
+
const { matchesAccept, sortFiles } = Nude;
|
|
9
|
+
/** A drop target that is also a button: click or press Enter to open the file picker. */
|
|
10
|
+
const Root = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Root, {
|
|
11
|
+
...props,
|
|
12
|
+
className: cn("flex cursor-default flex-col items-center gap-2 rounded-bloom border border-dashed border-current/25 p-8 text-center outline-none transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bloom-sky", "data-dragging:border-current/60 data-dragging:bg-current/5 data-disabled:pointer-events-none data-disabled:opacity-50", className)
|
|
13
|
+
});
|
|
14
|
+
const Icon = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Icon, {
|
|
15
|
+
"aria-hidden": true,
|
|
16
|
+
...props,
|
|
17
|
+
className: iconTile({
|
|
18
|
+
size: "md",
|
|
19
|
+
tone: "soft",
|
|
20
|
+
class: className
|
|
21
|
+
})
|
|
22
|
+
});
|
|
23
|
+
const Title = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Title, {
|
|
24
|
+
...props,
|
|
25
|
+
className: cn("text-sm/6 font-medium", className)
|
|
26
|
+
});
|
|
27
|
+
const Description = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Description, {
|
|
28
|
+
...props,
|
|
29
|
+
className: cn(mutedText, className)
|
|
30
|
+
});
|
|
31
|
+
//#endregion
|
|
32
|
+
export { Description, Icon, Root, Title, matchesAccept, sortFiles };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Description, FileRejection, Icon, RejectionReason, Root, Title } from "./file-dropzone-parts.js";
|
|
2
|
+
//#region src/file-dropzone.d.ts
|
|
3
|
+
declare const FileDropzone: {
|
|
4
|
+
Root: typeof Root;
|
|
5
|
+
Icon: typeof Icon;
|
|
6
|
+
Title: typeof Title;
|
|
7
|
+
Description: typeof Description;
|
|
8
|
+
};
|
|
9
|
+
//#endregion
|
|
10
|
+
export { FileDropzone, type FileRejection, type RejectionReason };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { VariantProps } from "./lib/tv.js";
|
|
2
|
+
import { ComponentPropsWithRef } from "react";
|
|
3
|
+
//#region src/heading.d.ts
|
|
4
|
+
declare const heading: import("tailwind-variants").TVReturnType<{
|
|
5
|
+
size: {
|
|
6
|
+
sm: "text-lg/7";
|
|
7
|
+
md: "text-2xl/8";
|
|
8
|
+
lg: "text-3xl/9";
|
|
9
|
+
xl: "text-5xl/none";
|
|
10
|
+
};
|
|
11
|
+
}, undefined, "font-medium tracking-tight", {
|
|
12
|
+
size: {
|
|
13
|
+
sm: "text-lg/7";
|
|
14
|
+
md: "text-2xl/8";
|
|
15
|
+
lg: "text-3xl/9";
|
|
16
|
+
xl: "text-5xl/none";
|
|
17
|
+
};
|
|
18
|
+
}, undefined, import("tailwind-variants").TVReturnTypeLike<{
|
|
19
|
+
size: {
|
|
20
|
+
sm: "text-lg/7";
|
|
21
|
+
md: "text-2xl/8";
|
|
22
|
+
lg: "text-3xl/9";
|
|
23
|
+
xl: "text-5xl/none";
|
|
24
|
+
};
|
|
25
|
+
}, undefined>>;
|
|
26
|
+
type HeadingProps = ComponentPropsWithRef<'h1'> & VariantProps<typeof heading> & {
|
|
27
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
28
|
+
};
|
|
29
|
+
declare const Heading: ({ level, size, className, ...props }: HeadingProps) => import("react").JSX.Element;
|
|
30
|
+
//#endregion
|
|
31
|
+
export { Heading, type HeadingProps };
|
package/dist/heading.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { tv } from "./lib/tv.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Heading as Heading$1 } from "@journ/nude/heading";
|
|
4
|
+
//#region src/heading.tsx
|
|
5
|
+
const heading = tv({
|
|
6
|
+
base: "font-medium tracking-tight",
|
|
7
|
+
variants: { size: {
|
|
8
|
+
sm: "text-lg/7",
|
|
9
|
+
md: "text-2xl/8",
|
|
10
|
+
lg: "text-3xl/9",
|
|
11
|
+
xl: "text-5xl/none"
|
|
12
|
+
} },
|
|
13
|
+
defaultVariants: { size: "lg" }
|
|
14
|
+
});
|
|
15
|
+
const Heading = ({ level = 1, size, className, ...props }) => {
|
|
16
|
+
return /* @__PURE__ */ jsx(Heading$1, {
|
|
17
|
+
level,
|
|
18
|
+
...props,
|
|
19
|
+
className: heading({
|
|
20
|
+
size,
|
|
21
|
+
class: className
|
|
22
|
+
})
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
//#endregion
|
|
26
|
+
export { Heading };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ComponentPropsWithRef } from "react";
|
|
2
|
+
import * as Nude from "@journ/nude/hover-card-parts";
|
|
3
|
+
//#region src/hover-card-parts.d.ts
|
|
4
|
+
declare const Root: any;
|
|
5
|
+
declare const Trigger: any;
|
|
6
|
+
declare const Content: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Content>) => import("react").JSX.Element;
|
|
7
|
+
//#endregion
|
|
8
|
+
export { Content, Root, Trigger };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "./lib/cn.js";
|
|
3
|
+
import { usePopEnter } from "./lib/use-enter.js";
|
|
4
|
+
import { floatingCard } from "./lib/overlay.js";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import * as Nude from "@journ/nude/hover-card-parts";
|
|
7
|
+
//#region src/hover-card-parts.tsx
|
|
8
|
+
const Root = Nude.Root;
|
|
9
|
+
const Trigger = Nude.Trigger;
|
|
10
|
+
const Content = ({ className, ...props }) => {
|
|
11
|
+
const panel = usePopEnter(160);
|
|
12
|
+
return /* @__PURE__ */ jsx(Nude.Content, {
|
|
13
|
+
ref: panel,
|
|
14
|
+
sideOffset: 8,
|
|
15
|
+
...props,
|
|
16
|
+
className: cn(floatingCard, className)
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
//#endregion
|
|
20
|
+
export { Content, Root, Trigger };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { VariantProps } from "./lib/tv.js";
|
|
2
|
+
import { ComponentPropsWithRef } from "react";
|
|
3
|
+
//#region src/icon-button.d.ts
|
|
4
|
+
declare const iconButton: import("tailwind-variants").TVReturnType<{
|
|
5
|
+
tone: {
|
|
6
|
+
neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
|
|
7
|
+
ink: "bg-bloom-ink text-bloom-paper";
|
|
8
|
+
coral: "bg-bloom-coral text-bloom-paper";
|
|
9
|
+
ghost: "bg-transparent text-inherit";
|
|
10
|
+
outline: "border border-current/15 bg-transparent text-inherit";
|
|
11
|
+
};
|
|
12
|
+
size: {
|
|
13
|
+
sm: "size-8 [&>svg]:size-4";
|
|
14
|
+
md: "size-9 [&>svg]:size-4";
|
|
15
|
+
};
|
|
16
|
+
}, undefined, string[], {
|
|
17
|
+
tone: {
|
|
18
|
+
neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
|
|
19
|
+
ink: "bg-bloom-ink text-bloom-paper";
|
|
20
|
+
coral: "bg-bloom-coral text-bloom-paper";
|
|
21
|
+
ghost: "bg-transparent text-inherit";
|
|
22
|
+
outline: "border border-current/15 bg-transparent text-inherit";
|
|
23
|
+
};
|
|
24
|
+
size: {
|
|
25
|
+
sm: "size-8 [&>svg]:size-4";
|
|
26
|
+
md: "size-9 [&>svg]:size-4";
|
|
27
|
+
};
|
|
28
|
+
}, undefined, import("tailwind-variants").TVReturnTypeLike<{
|
|
29
|
+
tone: {
|
|
30
|
+
neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
|
|
31
|
+
ink: "bg-bloom-ink text-bloom-paper";
|
|
32
|
+
coral: "bg-bloom-coral text-bloom-paper";
|
|
33
|
+
ghost: "bg-transparent text-inherit";
|
|
34
|
+
outline: "border border-current/15 bg-transparent text-inherit";
|
|
35
|
+
};
|
|
36
|
+
size: {
|
|
37
|
+
sm: "size-8 [&>svg]:size-4";
|
|
38
|
+
md: "size-9 [&>svg]:size-4";
|
|
39
|
+
};
|
|
40
|
+
}, undefined>>;
|
|
41
|
+
type IconButtonProps = ComponentPropsWithRef<'button'> & VariantProps<typeof iconButton>;
|
|
42
|
+
declare const IconButton: ({ tone, size, className, children, type, ...props }: IconButtonProps) => import("react").JSX.Element;
|
|
43
|
+
//#endregion
|
|
44
|
+
export { IconButton, type IconButtonProps, iconButton };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { tv } from "./lib/tv.js";
|
|
2
|
+
import { interactive } from "./lib/interactive.js";
|
|
3
|
+
import { inkTone, solidTones } from "./lib/tones.js";
|
|
4
|
+
import { TouchTarget } from "./touch-target.js";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { IconButton as IconButton$1 } from "@journ/nude/icon-button";
|
|
7
|
+
//#region src/icon-button.tsx
|
|
8
|
+
const iconButton = tv({
|
|
9
|
+
base: [interactive, "rounded-bloom grid shrink-0 place-items-center"],
|
|
10
|
+
variants: {
|
|
11
|
+
tone: {
|
|
12
|
+
neutral: solidTones.neutral,
|
|
13
|
+
ink: inkTone,
|
|
14
|
+
coral: solidTones.coral,
|
|
15
|
+
ghost: "bg-transparent text-inherit",
|
|
16
|
+
outline: "border border-current/15 bg-transparent text-inherit"
|
|
17
|
+
},
|
|
18
|
+
size: {
|
|
19
|
+
sm: "size-8 [&>svg]:size-4",
|
|
20
|
+
md: "size-9 [&>svg]:size-4"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
defaultVariants: {
|
|
24
|
+
tone: "neutral",
|
|
25
|
+
size: "md"
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
const IconButton = ({ tone, size, className, children, type = "button", ...props }) => /* @__PURE__ */ jsx(IconButton$1, {
|
|
29
|
+
type,
|
|
30
|
+
...props,
|
|
31
|
+
className: iconButton({
|
|
32
|
+
tone,
|
|
33
|
+
size,
|
|
34
|
+
class: className
|
|
35
|
+
}),
|
|
36
|
+
children: /* @__PURE__ */ jsx(TouchTarget, { children })
|
|
37
|
+
});
|
|
38
|
+
//#endregion
|
|
39
|
+
export { IconButton, iconButton };
|
package/dist/icon.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { VariantProps } from "./lib/tv.js";
|
|
2
|
+
import { ComponentPropsWithRef } from "react";
|
|
3
|
+
//#region src/icon.d.ts
|
|
4
|
+
declare const icon: import("tailwind-variants").TVReturnType<{
|
|
5
|
+
size: {
|
|
6
|
+
sm: "[&>svg]:size-4";
|
|
7
|
+
md: "[&>svg]:size-5";
|
|
8
|
+
lg: "[&>svg]:size-6";
|
|
9
|
+
xl: "[&>svg]:size-8";
|
|
10
|
+
};
|
|
11
|
+
}, undefined, "inline-flex shrink-0 items-center justify-center", {
|
|
12
|
+
size: {
|
|
13
|
+
sm: "[&>svg]:size-4";
|
|
14
|
+
md: "[&>svg]:size-5";
|
|
15
|
+
lg: "[&>svg]:size-6";
|
|
16
|
+
xl: "[&>svg]:size-8";
|
|
17
|
+
};
|
|
18
|
+
}, undefined, import("tailwind-variants").TVReturnTypeLike<{
|
|
19
|
+
size: {
|
|
20
|
+
sm: "[&>svg]:size-4";
|
|
21
|
+
md: "[&>svg]:size-5";
|
|
22
|
+
lg: "[&>svg]:size-6";
|
|
23
|
+
xl: "[&>svg]:size-8";
|
|
24
|
+
};
|
|
25
|
+
}, undefined>>;
|
|
26
|
+
type IconProps = ComponentPropsWithRef<'span'> & VariantProps<typeof icon>;
|
|
27
|
+
/** Sizes any svg child and hides it from assistive tech unless a label is given. */
|
|
28
|
+
declare const Icon: ({ size, className, 'aria-label': label, ...props }: IconProps) => import("react").JSX.Element;
|
|
29
|
+
//#endregion
|
|
30
|
+
export { Icon, type IconProps };
|
package/dist/icon.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { tv } from "./lib/tv.js";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Icon as Icon$1 } from "@journ/nude/icon";
|
|
4
|
+
//#region src/icon.tsx
|
|
5
|
+
const icon = tv({
|
|
6
|
+
base: "inline-flex shrink-0 items-center justify-center",
|
|
7
|
+
variants: { size: {
|
|
8
|
+
sm: "[&>svg]:size-4",
|
|
9
|
+
md: "[&>svg]:size-5",
|
|
10
|
+
lg: "[&>svg]:size-6",
|
|
11
|
+
xl: "[&>svg]:size-8"
|
|
12
|
+
} },
|
|
13
|
+
defaultVariants: { size: "md" }
|
|
14
|
+
});
|
|
15
|
+
/** Sizes any svg child and hides it from assistive tech unless a label is given. */
|
|
16
|
+
const Icon = ({ size, className, "aria-label": label, ...props }) => /* @__PURE__ */ jsx(Icon$1, {
|
|
17
|
+
role: label ? "img" : void 0,
|
|
18
|
+
"aria-label": label,
|
|
19
|
+
"aria-hidden": label ? void 0 : true,
|
|
20
|
+
...props,
|
|
21
|
+
className: icon({
|
|
22
|
+
size,
|
|
23
|
+
class: className
|
|
24
|
+
})
|
|
25
|
+
});
|
|
26
|
+
//#endregion
|
|
27
|
+
export { Icon };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { Accordion } from "./accordion.js";
|
|
2
|
+
import { VariantProps, tv } from "./lib/tv.js";
|
|
3
|
+
import { AlertDialog } from "./alert-dialog.js";
|
|
4
|
+
import { Alert } from "./alert.js";
|
|
5
|
+
import { AnimatedSize, AnimatedSizeProps } from "./animated-size.js";
|
|
6
|
+
import { Avatar } from "./avatar.js";
|
|
7
|
+
import { Badge } from "./badge.js";
|
|
8
|
+
import { Breadcrumbs } from "./breadcrumbs.js";
|
|
9
|
+
import { BulkBar } from "./bulk-bar.js";
|
|
10
|
+
import { Button, ButtonProps } from "./button.js";
|
|
11
|
+
import { IconButton, IconButtonProps } from "./icon-button.js";
|
|
12
|
+
import { CalendarActions, CalendarContextValue, CalendarMeta, CalendarState, CalendarView, RootProps, Weekday, useCalendar } from "./calendar-parts.js";
|
|
13
|
+
import { Calendar } from "./calendar.js";
|
|
14
|
+
import { Card, CardProps } from "./card.js";
|
|
15
|
+
import { RootProps as RootProps$1, useCarousel } from "./carousel-parts.js";
|
|
16
|
+
import { Carousel } from "./carousel.js";
|
|
17
|
+
import { Checkbox } from "./checkbox.js";
|
|
18
|
+
import { Chip, ChipProps as RootProps$2 } from "./chip.js";
|
|
19
|
+
import { Collapsible } from "./collapsible.js";
|
|
20
|
+
import { ComboboxActions, ComboboxContextValue, ComboboxState, RootProps as RootProps$3, useCombobox } from "./combobox-parts.js";
|
|
21
|
+
import { Combobox } from "./combobox.js";
|
|
22
|
+
import { RootProps as RootProps$4 } from "./command-palette-parts.js";
|
|
23
|
+
import { CommandPalette } from "./command-palette.js";
|
|
24
|
+
import { Composer } from "./composer.js";
|
|
25
|
+
import { ContextMenu } from "./context-menu.js";
|
|
26
|
+
import { RootProps as RootProps$5 } from "./currency-input-parts.js";
|
|
27
|
+
import { CurrencyInput } from "./currency-input.js";
|
|
28
|
+
import { DataTableColumn, RootProps as RootProps$6, dataTableColumns, selectColumn, useDataTable } from "./data-table-parts.js";
|
|
29
|
+
import { DataTable } from "./data-table.js";
|
|
30
|
+
import { DateInput } from "./date-input.js";
|
|
31
|
+
import { DatePickerActions, DatePickerContextValue, DatePickerMeta, DatePickerState, RootProps as RootProps$7, useDatePicker } from "./date-picker-parts.js";
|
|
32
|
+
import { DatePicker } from "./date-picker.js";
|
|
33
|
+
import { DateRange, DateRangePickerActions, DateRangePickerContextValue, DateRangePickerMeta, DateRangePickerState, RootProps as RootProps$8, useDateRangePicker } from "./date-range-picker-parts.js";
|
|
34
|
+
import { DateRangePicker } from "./date-range-picker.js";
|
|
35
|
+
import { DescriptionList } from "./description-list.js";
|
|
36
|
+
import { Dialog } from "./dialog.js";
|
|
37
|
+
import { Divider } from "./divider.js";
|
|
38
|
+
import { Drawer } from "./drawer.js";
|
|
39
|
+
import { DropdownMenu } from "./dropdown-menu.js";
|
|
40
|
+
import { EmptyState } from "./empty-state.js";
|
|
41
|
+
import { Field } from "./field.js";
|
|
42
|
+
import { FileRejection, RejectionReason } from "./file-dropzone-parts.js";
|
|
43
|
+
import { FileDropzone } from "./file-dropzone.js";
|
|
44
|
+
import { Heading } from "./heading.js";
|
|
45
|
+
import { HoverCard } from "./hover-card.js";
|
|
46
|
+
import { Icon } from "./icon.js";
|
|
47
|
+
import { Input } from "./input.js";
|
|
48
|
+
import { ClassValue, cn } from "./lib/cn.js";
|
|
49
|
+
import { Link } from "./link.js";
|
|
50
|
+
import { Markdown, MarkdownProps } from "./markdown.js";
|
|
51
|
+
import { Message } from "./message.js";
|
|
52
|
+
import { RootProps as RootProps$9 } from "./month-picker-parts.js";
|
|
53
|
+
import { MonthPicker } from "./month-picker.js";
|
|
54
|
+
import { MonthStepper } from "./month-stepper.js";
|
|
55
|
+
import { RootProps as RootProps$10, useMultipleSelector } from "./multiple-selector-parts.js";
|
|
56
|
+
import { MultipleSelector } from "./multiple-selector.js";
|
|
57
|
+
import { NavBar } from "./nav-bar.js";
|
|
58
|
+
import { NavigationMenu } from "./navigation-menu.js";
|
|
59
|
+
import { OtpInput } from "./otp-input.js";
|
|
60
|
+
import { Page, PageProps as RootProps$11 } from "./page.js";
|
|
61
|
+
import { PageHeader } from "./page-header.js";
|
|
62
|
+
import { Pagination } from "./pagination.js";
|
|
63
|
+
import { PillSelect } from "./pill-select.js";
|
|
64
|
+
import { Popover } from "./popover.js";
|
|
65
|
+
import { Portal, PortalProps } from "./portal.js";
|
|
66
|
+
import { Progress } from "./progress.js";
|
|
67
|
+
import { RootProps as RootProps$12 } from "./quantity-input-parts.js";
|
|
68
|
+
import { QuantityInput } from "./quantity-input.js";
|
|
69
|
+
import { Radio } from "./radio.js";
|
|
70
|
+
import { ScrollArea } from "./scroll-area.js";
|
|
71
|
+
import { Select } from "./select.js";
|
|
72
|
+
import { SheetContentProps as ContentProps, SheetSide as Side } from "./sheet-parts.js";
|
|
73
|
+
import { Sheet } from "./sheet.js";
|
|
74
|
+
import { Sidebar } from "./sidebar.js";
|
|
75
|
+
import { Skeleton } from "./skeleton.js";
|
|
76
|
+
import { Slider } from "./slider.js";
|
|
77
|
+
import { Spinner } from "./spinner.js";
|
|
78
|
+
import { Stack } from "./stack.js";
|
|
79
|
+
import { Stat } from "./stat.js";
|
|
80
|
+
import { Stepper } from "./stepper.js";
|
|
81
|
+
import { Switch } from "./switch.js";
|
|
82
|
+
import { Table } from "./table.js";
|
|
83
|
+
import { Tabs } from "./tabs.js";
|
|
84
|
+
import { RootProps as RootProps$13, useTagInput } from "./tag-input-parts.js";
|
|
85
|
+
import { TagInput } from "./tag-input.js";
|
|
86
|
+
import { Text } from "./text.js";
|
|
87
|
+
import { TextMorph, TextMorphProps } from "./text-morph.js";
|
|
88
|
+
import { TextShimmer, TextShimmerProps } from "./text-shimmer.js";
|
|
89
|
+
import { Textarea } from "./textarea.js";
|
|
90
|
+
import { RootProps as RootProps$14, TimeRangeValue } from "./time-range-parts.js";
|
|
91
|
+
import { TimeRange } from "./time-range.js";
|
|
92
|
+
import { Toast } from "./toast.js";
|
|
93
|
+
import { ToggleGroup } from "./toggle-group.js";
|
|
94
|
+
import { Tooltip } from "./tooltip.js";
|
|
95
|
+
import { TouchTarget } from "./touch-target.js";
|
|
96
|
+
export { Accordion, Alert, AlertDialog, AnimatedSize, type AnimatedSizeProps, Avatar, Badge, Breadcrumbs, BulkBar, Button, type ButtonProps, Calendar, type CalendarActions, type CalendarContextValue, type CalendarMeta, type RootProps as CalendarProps, type CalendarState, type CalendarView, Card, type CardProps, Carousel, type RootProps$1 as CarouselProps, Checkbox, Chip, type RootProps$2 as ChipProps, type ClassValue, Collapsible, Combobox, type ComboboxActions, type ComboboxContextValue, type RootProps$3 as ComboboxProps, type ComboboxState, CommandPalette, type RootProps$4 as CommandPaletteProps, Composer, ContextMenu, CurrencyInput, type RootProps$5 as CurrencyInputProps, DataTable, type DataTableColumn, type RootProps$6 as DataTableProps, DateInput, DatePicker, type DatePickerActions, type DatePickerContextValue, type DatePickerMeta, type RootProps$7 as DatePickerProps, type DatePickerState, type DateRange, DateRangePicker, type DateRangePickerActions, type DateRangePickerContextValue, type DateRangePickerMeta, type RootProps$8 as DateRangePickerProps, type DateRangePickerState, DescriptionList, Dialog, Divider, Drawer, DropdownMenu, EmptyState, Field, FileDropzone, type FileRejection, Heading, HoverCard, Icon, IconButton, type IconButtonProps, Input, Link, Markdown, type MarkdownProps, Message, MonthPicker, type RootProps$9 as MonthPickerProps, MonthStepper, MultipleSelector, type RootProps$10 as MultipleSelectorProps, NavBar, NavigationMenu, OtpInput, Page, PageHeader, type RootProps$11 as PageProps, Pagination, PillSelect, Popover, Portal, type PortalProps, Progress, QuantityInput, type RootProps$12 as QuantityInputProps, Radio, type RejectionReason, ScrollArea, Select, Sheet, type ContentProps as SheetContentProps, type Side as SheetSide, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, TagInput, type RootProps$13 as TagInputProps, Text, TextMorph, type TextMorphProps, TextShimmer, type TextShimmerProps, Textarea, TimeRange, type RootProps$14 as TimeRangeProps, type TimeRangeValue, Toast, ToggleGroup, Tooltip, TouchTarget, type VariantProps, type Weekday, cn, dataTableColumns, selectColumn, tv, useCalendar, useCarousel, useCombobox, useDataTable, useDatePicker, useDateRangePicker, useMultipleSelector, useTagInput };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { tv } from "./lib/tv.js";
|
|
2
|
+
import { cn } from "./lib/cn.js";
|
|
3
|
+
import { Accordion } from "./accordion.js";
|
|
4
|
+
import { AlertDialog } from "./alert-dialog.js";
|
|
5
|
+
import { Alert } from "./alert.js";
|
|
6
|
+
import { AnimatedSize } from "./animated-size.js";
|
|
7
|
+
import { Avatar } from "./avatar.js";
|
|
8
|
+
import { Badge } from "./badge.js";
|
|
9
|
+
import { Breadcrumbs } from "./breadcrumbs.js";
|
|
10
|
+
import { BulkBar } from "./bulk-bar.js";
|
|
11
|
+
import { Spinner } from "./spinner.js";
|
|
12
|
+
import { TouchTarget } from "./touch-target.js";
|
|
13
|
+
import { Button } from "./button.js";
|
|
14
|
+
import { IconButton } from "./icon-button.js";
|
|
15
|
+
import { useCalendar } from "./calendar-parts.js";
|
|
16
|
+
import { Calendar } from "./calendar.js";
|
|
17
|
+
import { Card } from "./card.js";
|
|
18
|
+
import { useCarousel } from "./carousel-parts.js";
|
|
19
|
+
import { Carousel } from "./carousel.js";
|
|
20
|
+
import { Checkbox } from "./checkbox.js";
|
|
21
|
+
import { Chip } from "./chip.js";
|
|
22
|
+
import { Collapsible } from "./collapsible.js";
|
|
23
|
+
import { useCombobox } from "./combobox-parts.js";
|
|
24
|
+
import { Combobox } from "./combobox.js";
|
|
25
|
+
import { CommandPalette } from "./command-palette.js";
|
|
26
|
+
import { Composer } from "./composer.js";
|
|
27
|
+
import { ContextMenu } from "./context-menu.js";
|
|
28
|
+
import { Input } from "./input.js";
|
|
29
|
+
import { CurrencyInput } from "./currency-input.js";
|
|
30
|
+
import { Pagination } from "./pagination.js";
|
|
31
|
+
import { Table } from "./table.js";
|
|
32
|
+
import { dataTableColumns, selectColumn, useDataTable } from "./data-table-parts.js";
|
|
33
|
+
import { DataTable } from "./data-table.js";
|
|
34
|
+
import { DateInput } from "./date-input.js";
|
|
35
|
+
import { useDatePicker } from "./date-picker-parts.js";
|
|
36
|
+
import { DatePicker } from "./date-picker.js";
|
|
37
|
+
import { useDateRangePicker } from "./date-range-picker-parts.js";
|
|
38
|
+
import { DateRangePicker } from "./date-range-picker.js";
|
|
39
|
+
import { DescriptionList } from "./description-list.js";
|
|
40
|
+
import { Dialog } from "./dialog.js";
|
|
41
|
+
import { Divider } from "./divider.js";
|
|
42
|
+
import { Drawer } from "./drawer.js";
|
|
43
|
+
import { DropdownMenu } from "./dropdown-menu.js";
|
|
44
|
+
import { EmptyState } from "./empty-state.js";
|
|
45
|
+
import { Field } from "./field.js";
|
|
46
|
+
import { FileDropzone } from "./file-dropzone.js";
|
|
47
|
+
import { Heading } from "./heading.js";
|
|
48
|
+
import { HoverCard } from "./hover-card.js";
|
|
49
|
+
import { Icon } from "./icon.js";
|
|
50
|
+
import { Link } from "./link.js";
|
|
51
|
+
import { Markdown } from "./markdown.js";
|
|
52
|
+
import { Message } from "./message.js";
|
|
53
|
+
import { MonthPicker } from "./month-picker.js";
|
|
54
|
+
import { MonthStepper } from "./month-stepper.js";
|
|
55
|
+
import { useMultipleSelector } from "./multiple-selector-parts.js";
|
|
56
|
+
import { MultipleSelector } from "./multiple-selector.js";
|
|
57
|
+
import { NavBar } from "./nav-bar.js";
|
|
58
|
+
import { NavigationMenu } from "./navigation-menu.js";
|
|
59
|
+
import { OtpInput } from "./otp-input.js";
|
|
60
|
+
import { Page } from "./page.js";
|
|
61
|
+
import { PageHeader } from "./page-header.js";
|
|
62
|
+
import { PillSelect } from "./pill-select.js";
|
|
63
|
+
import { Popover } from "./popover.js";
|
|
64
|
+
import { Portal } from "./portal.js";
|
|
65
|
+
import { Progress } from "./progress.js";
|
|
66
|
+
import { QuantityInput } from "./quantity-input.js";
|
|
67
|
+
import { Radio } from "./radio.js";
|
|
68
|
+
import { ScrollArea } from "./scroll-area.js";
|
|
69
|
+
import { Select } from "./select.js";
|
|
70
|
+
import { Sheet } from "./sheet.js";
|
|
71
|
+
import { Sidebar } from "./sidebar.js";
|
|
72
|
+
import { Skeleton } from "./skeleton.js";
|
|
73
|
+
import { Slider } from "./slider.js";
|
|
74
|
+
import { Stack } from "./stack.js";
|
|
75
|
+
import { Stat } from "./stat.js";
|
|
76
|
+
import { Stepper } from "./stepper.js";
|
|
77
|
+
import { Switch } from "./switch.js";
|
|
78
|
+
import { Tabs } from "./tabs.js";
|
|
79
|
+
import { useTagInput } from "./tag-input-parts.js";
|
|
80
|
+
import { TagInput } from "./tag-input.js";
|
|
81
|
+
import { Text } from "./text.js";
|
|
82
|
+
import { TextMorph } from "./text-morph.js";
|
|
83
|
+
import { TextShimmer } from "./text-shimmer.js";
|
|
84
|
+
import { Textarea } from "./textarea.js";
|
|
85
|
+
import { TimeRange } from "./time-range.js";
|
|
86
|
+
import { Toast } from "./toast.js";
|
|
87
|
+
import { ToggleGroup } from "./toggle-group.js";
|
|
88
|
+
import { Tooltip } from "./tooltip.js";
|
|
89
|
+
export { Accordion, Alert, AlertDialog, AnimatedSize, Avatar, Badge, Breadcrumbs, BulkBar, Button, Calendar, Card, Carousel, Checkbox, Chip, Collapsible, Combobox, CommandPalette, Composer, ContextMenu, CurrencyInput, DataTable, DateInput, DatePicker, DateRangePicker, DescriptionList, Dialog, Divider, Drawer, DropdownMenu, EmptyState, Field, FileDropzone, Heading, HoverCard, Icon, IconButton, Input, Link, Markdown, Message, MonthPicker, MonthStepper, MultipleSelector, NavBar, NavigationMenu, OtpInput, Page, PageHeader, Pagination, PillSelect, Popover, Portal, Progress, QuantityInput, Radio, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, TagInput, Text, TextMorph, TextShimmer, Textarea, TimeRange, Toast, ToggleGroup, Tooltip, TouchTarget, cn, dataTableColumns, selectColumn, tv, useCalendar, useCarousel, useCombobox, useDataTable, useDatePicker, useDateRangePicker, useMultipleSelector, useTagInput };
|
package/dist/input.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ComponentPropsWithRef } from "react";
|
|
2
|
+
//#region src/input.d.ts
|
|
3
|
+
declare const field = "block w-full rounded-bloom px-3 border border-bloom-line dark:border-bloom-line-dark bg-transparent text-bloom-foreground dark:text-bloom-foreground-dark py-2.5 text-base/6 sm:py-1.5 sm:text-sm/6 placeholder:text-current/40 scheme-light dark:scheme-dark outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bloom-sky aria-invalid:border-bloom-coral disabled:opacity-50";
|
|
4
|
+
declare const input: (className?: string) => string;
|
|
5
|
+
declare const Input: ({ className, ...props }: ComponentPropsWithRef<'input'>) => import("react").JSX.Element;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { Input, field, input };
|
package/dist/input.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { cn } from "./lib/cn.js";
|
|
2
|
+
import { controlSize, fieldRing, fieldText } from "./lib/text-styles.js";
|
|
3
|
+
import { control } from "./lib/theme.js";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { Input as Input$1 } from "@journ/nude/input";
|
|
6
|
+
//#region src/input.tsx
|
|
7
|
+
const field = `block w-full rounded-bloom px-3 ${control} ${controlSize} ${fieldText} ${fieldRing}`;
|
|
8
|
+
const input = (className) => cn(field, className);
|
|
9
|
+
const Input = ({ className, ...props }) => /* @__PURE__ */ jsx(Input$1, {
|
|
10
|
+
...props,
|
|
11
|
+
className: input(className)
|
|
12
|
+
});
|
|
13
|
+
//#endregion
|
|
14
|
+
export { Input, field, input };
|
package/dist/lib/cn.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
//#region src/lib/cn.d.ts
|
|
2
|
+
type ClassValue = string | null | undefined | false | ClassValue[];
|
|
3
|
+
/** Joins class names; later Tailwind utilities win over earlier ones in the same group. */
|
|
4
|
+
declare const cn: (...args: ClassValue[]) => string;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { type ClassValue, cn };
|
package/dist/lib/cn.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { tv } from "./tv.js";
|
|
2
|
+
//#region src/lib/cn.ts
|
|
3
|
+
const cnClasses = tv({ base: [] });
|
|
4
|
+
/** Joins class names; later Tailwind utilities win over earlier ones in the same group. */
|
|
5
|
+
const cn = (...args) => cnClasses({ class: [args] }) ?? "";
|
|
6
|
+
//#endregion
|
|
7
|
+
export { cn };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
//#region src/lib/icon-tile.d.ts
|
|
2
|
+
/** A bordered square that holds an icon: card icons, empty states, dropzones. */
|
|
3
|
+
declare const iconTile: import("tailwind-variants").TVReturnType<{
|
|
4
|
+
size: {
|
|
5
|
+
md: "size-10 [&>svg]:size-5";
|
|
6
|
+
lg: "size-12 [&>svg]:size-6";
|
|
7
|
+
};
|
|
8
|
+
tone: {
|
|
9
|
+
outline: "border border-bloom-line dark:border-bloom-line-dark";
|
|
10
|
+
soft: "bg-current/8";
|
|
11
|
+
};
|
|
12
|
+
}, undefined, "grid shrink-0 place-items-center", {
|
|
13
|
+
size: {
|
|
14
|
+
md: "size-10 [&>svg]:size-5";
|
|
15
|
+
lg: "size-12 [&>svg]:size-6";
|
|
16
|
+
};
|
|
17
|
+
tone: {
|
|
18
|
+
outline: "border border-bloom-line dark:border-bloom-line-dark";
|
|
19
|
+
soft: "bg-current/8";
|
|
20
|
+
};
|
|
21
|
+
}, undefined, import("tailwind-variants").TVReturnTypeLike<{
|
|
22
|
+
size: {
|
|
23
|
+
md: "size-10 [&>svg]:size-5";
|
|
24
|
+
lg: "size-12 [&>svg]:size-6";
|
|
25
|
+
};
|
|
26
|
+
tone: {
|
|
27
|
+
outline: "border border-bloom-line dark:border-bloom-line-dark";
|
|
28
|
+
soft: "bg-current/8";
|
|
29
|
+
};
|
|
30
|
+
}, undefined>>;
|
|
31
|
+
//#endregion
|
|
32
|
+
export { iconTile };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { tv } from "./tv.js";
|
|
2
|
+
import { line } from "./theme.js";
|
|
3
|
+
//#region src/lib/icon-tile.ts
|
|
4
|
+
/** A bordered square that holds an icon: card icons, empty states, dropzones. */
|
|
5
|
+
const iconTile = tv({
|
|
6
|
+
base: "grid shrink-0 place-items-center",
|
|
7
|
+
variants: {
|
|
8
|
+
size: {
|
|
9
|
+
md: "size-10 [&>svg]:size-5",
|
|
10
|
+
lg: "size-12 [&>svg]:size-6"
|
|
11
|
+
},
|
|
12
|
+
tone: {
|
|
13
|
+
outline: `border ${line}`,
|
|
14
|
+
soft: "bg-current/8"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
size: "md",
|
|
19
|
+
tone: "outline"
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
//#endregion
|
|
23
|
+
export { iconTile };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//#region src/lib/interactive.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Shared affordances for anything pressable: keyboard-only focus ring, a
|
|
4
|
+
* currentColor hover/press overlay that sits between the background and the
|
|
5
|
+
* content, and a dimmed disabled state. Flat: nothing moves on press.
|
|
6
|
+
*/
|
|
7
|
+
/** Stops text selection and the iOS tap flash on controls that are pressed, not read. */
|
|
8
|
+
declare const pressReset = "select-none [-webkit-tap-highlight-color:transparent]";
|
|
9
|
+
declare const interactive: string;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { interactive, pressReset };
|