@journ/bloom 0.1.3 → 0.2.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 +2 -2
- package/README.md +1 -1
- package/package.json +3 -8
- package/dist/index.d.ts +0 -97
- package/dist/index.js +0 -90
package/DESIGN.md
CHANGED
|
@@ -189,7 +189,7 @@ The typeface is `--font-bloom-display`. Load Hedvig Letters Sans (or your own fa
|
|
|
189
189
|
|
|
190
190
|
## Components
|
|
191
191
|
|
|
192
|
-
Import
|
|
192
|
+
Import per file (`@journ/bloom/card`). The library named in parentheses is what the nude part is built on.
|
|
193
193
|
|
|
194
194
|
| Component | Parts |
|
|
195
195
|
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
@@ -284,5 +284,5 @@ Button, IconButton and Badge tones: `neutral` (default, inverts with the theme),
|
|
|
284
284
|
2. Create `packages/bloom/src/<name>.tsx`: wrap each nude part and add classes through `cn` or `tv`.
|
|
285
285
|
3. Use only `bloom-*` tokens. Add a token before adding a raw value.
|
|
286
286
|
4. Reuse `interactive` and `TouchTarget` for anything pressable.
|
|
287
|
-
5. Export at the end of the file
|
|
287
|
+
5. Export at the end of the file. Any `src/*.tsx` is exposed as `@journ/bloom/<name>`.
|
|
288
288
|
6. Add a usage to a story in `apps/playground/src` and check it on a phone-width viewport.
|
package/README.md
CHANGED
|
@@ -42,7 +42,7 @@ function Example() {
|
|
|
42
42
|
}
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
Every component has its own entry (`@journ/bloom/button`, `@journ/bloom/dialog`, ...).
|
|
45
|
+
Every component has its own entry (`@journ/bloom/button`, `@journ/bloom/dialog`, ...).
|
|
46
46
|
|
|
47
47
|
### With your own Tailwind
|
|
48
48
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@journ/bloom",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Styled UI library A. Wraps nude primitives with a Tailwind style layer and ships precompiled, prefixed CSS. Sibling of lotus, web only.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -17,11 +17,6 @@
|
|
|
17
17
|
"**/*.css"
|
|
18
18
|
],
|
|
19
19
|
"exports": {
|
|
20
|
-
".": {
|
|
21
|
-
"@journ/source": "./src/index.ts",
|
|
22
|
-
"types": "./dist/index.d.ts",
|
|
23
|
-
"default": "./dist/index.js"
|
|
24
|
-
},
|
|
25
20
|
"./*": {
|
|
26
21
|
"@journ/source": "./src/*.tsx",
|
|
27
22
|
"types": "./dist/*.d.ts",
|
|
@@ -44,8 +39,8 @@
|
|
|
44
39
|
"animejs": "^4.5.0",
|
|
45
40
|
"lucide-react": "^1.48.0",
|
|
46
41
|
"tailwind-variants": "^3.3.1",
|
|
47
|
-
"@journ/
|
|
48
|
-
"@journ/
|
|
42
|
+
"@journ/lift": "0.2.1",
|
|
43
|
+
"@journ/nude": "0.2.1"
|
|
49
44
|
},
|
|
50
45
|
"devDependencies": {
|
|
51
46
|
"@tailwindcss/cli": "^4.3.3",
|
package/dist/index.d.ts
DELETED
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { Accordion } from "./accordion.js";
|
|
2
|
-
import { AlertDialog } from "./alert-dialog.js";
|
|
3
|
-
import { Alert } from "./alert.js";
|
|
4
|
-
import { AnimatedSize, AnimatedSizeProps } from "./animated-size.js";
|
|
5
|
-
import { Avatar } from "./avatar.js";
|
|
6
|
-
import { Badge } from "./badge.js";
|
|
7
|
-
import { Breadcrumbs } from "./breadcrumbs.js";
|
|
8
|
-
import { BulkBar } from "./bulk-bar.js";
|
|
9
|
-
import { VariantProps, tv } from "./lib/tv.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 { ListRow, ListRowButtonProps, ListRowLinkProps, ListRowProps, ListRowTone } from "./list-row.js";
|
|
51
|
-
import { Markdown, MarkdownProps } from "./markdown.js";
|
|
52
|
-
import { Message } from "./message.js";
|
|
53
|
-
import { RootProps as RootProps$9 } from "./month-picker-parts.js";
|
|
54
|
-
import { MonthPicker } from "./month-picker.js";
|
|
55
|
-
import { MonthStepper } from "./month-stepper.js";
|
|
56
|
-
import { RootProps as RootProps$10, useMultipleSelector } from "./multiple-selector-parts.js";
|
|
57
|
-
import { MultipleSelector } from "./multiple-selector.js";
|
|
58
|
-
import { NavBar } from "./nav-bar.js";
|
|
59
|
-
import { NavigationMenu } from "./navigation-menu.js";
|
|
60
|
-
import { OtpInput } from "./otp-input.js";
|
|
61
|
-
import { Page, PageProps as RootProps$11 } from "./page.js";
|
|
62
|
-
import { PageHeader } from "./page-header.js";
|
|
63
|
-
import { Pagination } from "./pagination.js";
|
|
64
|
-
import { PillSelect } from "./pill-select.js";
|
|
65
|
-
import { Popover } from "./popover.js";
|
|
66
|
-
import { Portal, PortalProps } from "./portal.js";
|
|
67
|
-
import { Progress } from "./progress.js";
|
|
68
|
-
import { RootProps as RootProps$12 } from "./quantity-input-parts.js";
|
|
69
|
-
import { QuantityInput } from "./quantity-input.js";
|
|
70
|
-
import { Radio } from "./radio.js";
|
|
71
|
-
import { ScrollArea } from "./scroll-area.js";
|
|
72
|
-
import { Select } from "./select.js";
|
|
73
|
-
import { SheetContentProps as ContentProps, SheetSide as Side } from "./sheet-parts.js";
|
|
74
|
-
import { Sheet } from "./sheet.js";
|
|
75
|
-
import { Sidebar } from "./sidebar.js";
|
|
76
|
-
import { Skeleton } from "./skeleton.js";
|
|
77
|
-
import { Slider } from "./slider.js";
|
|
78
|
-
import { Spinner } from "./spinner.js";
|
|
79
|
-
import { Stack } from "./stack.js";
|
|
80
|
-
import { Stat } from "./stat.js";
|
|
81
|
-
import { Stepper } from "./stepper.js";
|
|
82
|
-
import { Switch } from "./switch.js";
|
|
83
|
-
import { Table } from "./table.js";
|
|
84
|
-
import { Tabs } from "./tabs.js";
|
|
85
|
-
import { RootProps as RootProps$13, useTagInput } from "./tag-input-parts.js";
|
|
86
|
-
import { TagInput } from "./tag-input.js";
|
|
87
|
-
import { Text } from "./text.js";
|
|
88
|
-
import { TextMorph, TextMorphProps } from "./text-morph.js";
|
|
89
|
-
import { TextShimmer, TextShimmerProps } from "./text-shimmer.js";
|
|
90
|
-
import { Textarea } from "./textarea.js";
|
|
91
|
-
import { RootProps as RootProps$14, TimeRangeValue } from "./time-range-parts.js";
|
|
92
|
-
import { TimeRange } from "./time-range.js";
|
|
93
|
-
import { Toast } from "./toast.js";
|
|
94
|
-
import { ToggleGroup } from "./toggle-group.js";
|
|
95
|
-
import { Tooltip } from "./tooltip.js";
|
|
96
|
-
import { TouchTarget } from "./touch-target.js";
|
|
97
|
-
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, ListRow, type ListRowButtonProps, type ListRowLinkProps, type ListRowProps, type ListRowTone, 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
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
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 { ListRow } from "./list-row.js";
|
|
52
|
-
import { Markdown } from "./markdown.js";
|
|
53
|
-
import { Message } from "./message.js";
|
|
54
|
-
import { MonthPicker } from "./month-picker.js";
|
|
55
|
-
import { MonthStepper } from "./month-stepper.js";
|
|
56
|
-
import { useMultipleSelector } from "./multiple-selector-parts.js";
|
|
57
|
-
import { MultipleSelector } from "./multiple-selector.js";
|
|
58
|
-
import { NavBar } from "./nav-bar.js";
|
|
59
|
-
import { NavigationMenu } from "./navigation-menu.js";
|
|
60
|
-
import { OtpInput } from "./otp-input.js";
|
|
61
|
-
import { Page } from "./page.js";
|
|
62
|
-
import { PageHeader } from "./page-header.js";
|
|
63
|
-
import { PillSelect } from "./pill-select.js";
|
|
64
|
-
import { Popover } from "./popover.js";
|
|
65
|
-
import { Portal } from "./portal.js";
|
|
66
|
-
import { Progress } from "./progress.js";
|
|
67
|
-
import { QuantityInput } from "./quantity-input.js";
|
|
68
|
-
import { Radio } from "./radio.js";
|
|
69
|
-
import { ScrollArea } from "./scroll-area.js";
|
|
70
|
-
import { Select } from "./select.js";
|
|
71
|
-
import { Sheet } from "./sheet.js";
|
|
72
|
-
import { Sidebar } from "./sidebar.js";
|
|
73
|
-
import { Skeleton } from "./skeleton.js";
|
|
74
|
-
import { Slider } from "./slider.js";
|
|
75
|
-
import { Stack } from "./stack.js";
|
|
76
|
-
import { Stat } from "./stat.js";
|
|
77
|
-
import { Stepper } from "./stepper.js";
|
|
78
|
-
import { Switch } from "./switch.js";
|
|
79
|
-
import { Tabs } from "./tabs.js";
|
|
80
|
-
import { useTagInput } from "./tag-input-parts.js";
|
|
81
|
-
import { TagInput } from "./tag-input.js";
|
|
82
|
-
import { Text } from "./text.js";
|
|
83
|
-
import { TextMorph } from "./text-morph.js";
|
|
84
|
-
import { TextShimmer } from "./text-shimmer.js";
|
|
85
|
-
import { Textarea } from "./textarea.js";
|
|
86
|
-
import { TimeRange } from "./time-range.js";
|
|
87
|
-
import { Toast } from "./toast.js";
|
|
88
|
-
import { ToggleGroup } from "./toggle-group.js";
|
|
89
|
-
import { Tooltip } from "./tooltip.js";
|
|
90
|
-
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, ListRow, 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 };
|