@scalably/ui 0.3.0 → 0.4.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.
- package/README.md +72 -20
- package/dist/ellipse-1-KLKF5JLX.png +0 -0
- package/dist/ellipse-2-S4X56YEC.png +0 -0
- package/dist/index.d.cts +209 -20
- package/dist/index.d.ts +209 -20
- package/dist/index.esm.js +3 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/multiple-line-PVJRKNX7.svg +48 -0
- package/dist/radial-gradient-bg-MNKFH462.png +0 -0
- package/dist/styles.css +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -11,9 +11,12 @@ A modern, accessible, and fully isolated React component library built with Type
|
|
|
11
11
|
- **TypeScript First**: Full type safety with comprehensive prop interfaces
|
|
12
12
|
- **Accessible**: Built with accessibility best practices and WCAG compliance
|
|
13
13
|
- **Modern**: Uses latest React patterns and modern build tools (tsup, Vite, Storybook)
|
|
14
|
+
- **Rich Text Editing**: TipTap-based editor with character counting, media embeds, and formatting toolbar
|
|
14
15
|
- **Customizable**: Flexible variant system with class-variance-authority
|
|
15
16
|
- **Comprehensive**: 20+ production-ready components with full documentation
|
|
16
17
|
- **Production Ready**: Complete build pipeline with CommonJS and ES modules
|
|
18
|
+
- **Icons & Assets**: First-class icon set, avatar placeholders, and logo assets
|
|
19
|
+
- **Utilities & Helpers**: Shared date helpers, form helpers, and utility functions (`cn`, `debounce`, `throttle`, `scopeClass`)
|
|
17
20
|
|
|
18
21
|
## 📦 Installation
|
|
19
22
|
|
|
@@ -100,26 +103,33 @@ import type { SVGProps } from "react";
|
|
|
100
103
|
```
|
|
101
104
|
|
|
102
105
|
### Helper Functions
|
|
103
|
-
- Date helpers
|
|
104
|
-
- Form helpers
|
|
106
|
+
- **Date helpers**: `addMonths`, `clampDate`, `daysGrid`, `endOfMonth`, `formatDateLocalized`, `isSameDay`, `monthsForLocale`, `startOfMonth`, `toDateKey`, `weekdaysForLocale`
|
|
107
|
+
- **Form helpers**: `fieldErrorToProps`, `zodErrorsToSummary` and `type FieldErrorLike`
|
|
108
|
+
- **Utilities**: `cn` (Tailwind-aware className helper), `debounce`, `throttle`, `scopeClass` for safely building `sui-*` class strings
|
|
105
109
|
|
|
106
110
|
### Example Usage
|
|
107
111
|
|
|
108
112
|
```tsx
|
|
109
|
-
import {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
+
import {
|
|
114
|
+
AuthPrompt,
|
|
115
|
+
BackToTop,
|
|
116
|
+
Button,
|
|
113
117
|
CheckboxGroup,
|
|
114
118
|
DatePicker,
|
|
119
|
+
FileUpload,
|
|
120
|
+
Input,
|
|
121
|
+
Pagination,
|
|
122
|
+
RichTextEditor,
|
|
123
|
+
Select,
|
|
115
124
|
Toast,
|
|
116
|
-
|
|
117
|
-
|
|
125
|
+
ToastContainer,
|
|
126
|
+
ViewToggle,
|
|
127
|
+
} from '@scalably/ui';
|
|
118
128
|
|
|
119
129
|
// Button with variants
|
|
120
|
-
<Button variant="destructive">Delete</Button
|
|
121
|
-
<Button variant="outline">Cancel</Button
|
|
122
|
-
<Button loading>Loading...</Button
|
|
130
|
+
<Button variant="destructive">Delete</Button>;
|
|
131
|
+
<Button variant="outline">Cancel</Button>;
|
|
132
|
+
<Button loading>Loading...</Button>;
|
|
123
133
|
|
|
124
134
|
// Input with validation
|
|
125
135
|
<Input
|
|
@@ -127,23 +137,57 @@ import {
|
|
|
127
137
|
type="email"
|
|
128
138
|
placeholder="Enter your email"
|
|
129
139
|
error="Please enter a valid email"
|
|
130
|
-
|
|
140
|
+
/>;
|
|
131
141
|
|
|
132
142
|
// Date picker
|
|
133
143
|
<DatePicker
|
|
134
144
|
mode="single"
|
|
135
145
|
placeholder="Select a date"
|
|
136
146
|
onChange={(date) => console.log(date)}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
// Toast notifications
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
147
|
+
/>;
|
|
148
|
+
|
|
149
|
+
// Toast notifications (declarative)
|
|
150
|
+
<ToastContainer>
|
|
151
|
+
<Toast
|
|
152
|
+
status="success"
|
|
153
|
+
title="Success!"
|
|
154
|
+
description="Your changes have been saved."
|
|
155
|
+
/>
|
|
156
|
+
</ToastContainer>;
|
|
157
|
+
|
|
158
|
+
// Rich text editor
|
|
159
|
+
<RichTextEditor
|
|
160
|
+
value="<p>Start writing...</p>"
|
|
161
|
+
onChange={(value) => console.log(value)}
|
|
162
|
+
maxCharacters={5000}
|
|
163
|
+
/>;
|
|
164
|
+
|
|
165
|
+
// Marketing-style auth prompt card
|
|
166
|
+
<AuthPrompt
|
|
167
|
+
title="Welcome back"
|
|
168
|
+
description="Log in to manage your campaigns."
|
|
169
|
+
primaryActionLabel="Log in"
|
|
170
|
+
onPrimaryAction={() => console.log('login')}
|
|
171
|
+
/>;
|
|
172
|
+
|
|
173
|
+
// Toggle between list and grid views
|
|
174
|
+
<ViewToggle view="list" onViewChange={(v) => console.log(v)} />;
|
|
175
|
+
|
|
176
|
+
// Scroll-to-top helper
|
|
177
|
+
<BackToTop />;
|
|
145
178
|
```
|
|
146
179
|
|
|
180
|
+
## 🧩 Components & APIs Overview
|
|
181
|
+
|
|
182
|
+
This library exposes a set of composable, production-ready primitives. The full list of exports is available in `src/index.ts`, but the main groups are:
|
|
183
|
+
|
|
184
|
+
- **Form primitives**: `Form`, `FormField`, `FormErrorSummary`, `Input`, `SearchInput`, `QuantityInput`, `CheckBox`, `CheckBoxGroup`, `Radio`, `RadioGroup`, `Select`, `Switch`, `FileUpload`, `DateInput`, `DatePicker`, `TimePicker`
|
|
185
|
+
- **Feedback & status**: `StatusBadge`, `Toast`, `ToastContainer`, `Skeleton`, `SkeletonText`, `Countdown`
|
|
186
|
+
- **Layout & navigation**: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `Pagination`, `BackToTop`, `ViewToggle`, `Divider`
|
|
187
|
+
- **Content & rich text**: `RichTextEditor`, `RichTextViewer`, `Tooltip`, `AuthPrompt`, `LoadingScreen`
|
|
188
|
+
- **Media & brand**: `AvatarPlaceholder`, `Logo`, `logoAssets`, `defaultAssets`
|
|
189
|
+
- **Icons**: All icons from `@/icons` and `@/icons/company` are re-exported, e.g. `SearchIcon`, `CalendarIcon`, `SuccessIcon`, `ErrorIcon`, `DiscordIcon`, `FacebookIcon`, `XIcon`, `YoutubeIcon`, and more.
|
|
190
|
+
|
|
147
191
|
## 🎨 Styling
|
|
148
192
|
|
|
149
193
|
### Style Isolation
|
|
@@ -223,6 +267,8 @@ Visit our Storybook documentation for:
|
|
|
223
267
|
- Accessibility testing with axe-core
|
|
224
268
|
- Design tokens and theming
|
|
225
269
|
|
|
270
|
+
You can access the latest published Storybook at: `https://scalably.com/dev/storybook`.
|
|
271
|
+
|
|
226
272
|
## 🎨 Design System
|
|
227
273
|
|
|
228
274
|
### Colors
|
|
@@ -244,6 +290,10 @@ Visit our Storybook documentation for:
|
|
|
244
290
|
|
|
245
291
|
## 🔧 Configuration
|
|
246
292
|
|
|
293
|
+
### Fonts
|
|
294
|
+
|
|
295
|
+
The library uses the **Poppins** font family (with **Inter** and system fonts as fallbacks) and loads Poppins via Google Fonts from within the bundled CSS. In most setups you do **not** need to add additional font imports, but if your build pipeline blocks remote `@import` rules, you can alternatively include Poppins yourself (e.g., via Google Fonts or `@fontsource/poppins`) to ensure consistent typography.
|
|
296
|
+
|
|
247
297
|
### Tailwind Config
|
|
248
298
|
|
|
249
299
|
The library uses a custom Tailwind configuration with:
|
|
@@ -327,6 +377,8 @@ The library includes comprehensive testing setup:
|
|
|
327
377
|
- `date-fns` - Date manipulation utilities
|
|
328
378
|
- `clsx` - Conditional class names
|
|
329
379
|
- `tailwind-merge` - Tailwind class merging
|
|
380
|
+
- `@tiptap/react` & `@tiptap/starter-kit` - Rich text editor foundation
|
|
381
|
+
- `@tiptap/extension-*` - Rich text extensions (character count, image, alignment, placeholder, YouTube, etc.)
|
|
330
382
|
|
|
331
383
|
---
|
|
332
384
|
|
|
Binary file
|
|
Binary file
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { ReactNode, ImgHTMLAttributes } from 'react';
|
|
2
|
+
import react__default, { ReactNode, HTMLAttributes, ImgHTMLAttributes } from 'react';
|
|
3
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
@@ -88,6 +88,64 @@ interface BackToTopProps {
|
|
|
88
88
|
*/
|
|
89
89
|
declare const BackToTop: react.ForwardRefExoticComponent<BackToTopProps & react.RefAttributes<HTMLButtonElement>>;
|
|
90
90
|
|
|
91
|
+
interface AuthPromptProps {
|
|
92
|
+
/** Main heading text. Defaults to "Login to continue". */
|
|
93
|
+
title?: React.ReactNode;
|
|
94
|
+
/**
|
|
95
|
+
* Supporting description below the title.
|
|
96
|
+
* Defaults to "Login to unlock this feature and continue exploring".
|
|
97
|
+
*/
|
|
98
|
+
description?: React.ReactNode;
|
|
99
|
+
/** Label for the primary action button (left). Defaults to "Login". */
|
|
100
|
+
primaryLabel?: React.ReactNode;
|
|
101
|
+
/** Label for the secondary action button (right). Defaults to "Register". */
|
|
102
|
+
secondaryLabel?: React.ReactNode;
|
|
103
|
+
/**
|
|
104
|
+
* Click handler for the primary action button.
|
|
105
|
+
* Typically used to navigate to the login page.
|
|
106
|
+
*/
|
|
107
|
+
onPrimaryClick?: () => void;
|
|
108
|
+
/**
|
|
109
|
+
* Click handler for the secondary action button.
|
|
110
|
+
* Typically used to navigate to the registration page.
|
|
111
|
+
*/
|
|
112
|
+
onSecondaryClick?: () => void;
|
|
113
|
+
/** Additional classes for the outer container. */
|
|
114
|
+
className?: string;
|
|
115
|
+
/** Additional classes for the buttons wrapper row. */
|
|
116
|
+
actionsClassName?: string;
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* AuthPrompt - A simple authentication call-to-action card.
|
|
120
|
+
*
|
|
121
|
+
* Designed for feature gating flows where users must authenticate before
|
|
122
|
+
* continuing. The layout follows the Scalably design system and the
|
|
123
|
+
* provided reference UI:
|
|
124
|
+
*
|
|
125
|
+
* - Centered card with title and description
|
|
126
|
+
* - Two horizontally aligned buttons on the same row
|
|
127
|
+
* - Mobile-first responsive layout with full-width buttons on small screens
|
|
128
|
+
* - Consumers provide navigation logic via `onPrimaryClick` / `onSecondaryClick`
|
|
129
|
+
*
|
|
130
|
+
* @example
|
|
131
|
+
* ```tsx
|
|
132
|
+
* <AuthPrompt
|
|
133
|
+
* onPrimaryClick={() => router.push("/login")}
|
|
134
|
+
* onSecondaryClick={() => router.push("/register")}
|
|
135
|
+
* />
|
|
136
|
+
*
|
|
137
|
+
* <AuthPrompt
|
|
138
|
+
* title="Join Scalably"
|
|
139
|
+
* description="Create an account or log in to save your workspace."
|
|
140
|
+
* primaryLabel="Sign in"
|
|
141
|
+
* secondaryLabel="Create account"
|
|
142
|
+
* onPrimaryClick={() => navigate("/signin")}
|
|
143
|
+
* onSecondaryClick={() => navigate("/signup")}
|
|
144
|
+
* />
|
|
145
|
+
* ```
|
|
146
|
+
*/
|
|
147
|
+
declare const AuthPrompt: React.FC<AuthPromptProps>;
|
|
148
|
+
|
|
91
149
|
/**
|
|
92
150
|
* Accessible status badge with semantic color variants.
|
|
93
151
|
*
|
|
@@ -107,9 +165,9 @@ declare const BackToTop: react.ForwardRefExoticComponent<BackToTopProps & react.
|
|
|
107
165
|
* ```
|
|
108
166
|
*/
|
|
109
167
|
declare const statusBadgeVariants: (props?: ({
|
|
110
|
-
size?: "
|
|
168
|
+
size?: "md" | "lg" | "sm" | null | undefined;
|
|
111
169
|
status?: "error" | "success" | "warning" | "info" | "inactive" | null | undefined;
|
|
112
|
-
variant?: "
|
|
170
|
+
variant?: "outline" | "solid" | "soft" | null | undefined;
|
|
113
171
|
fullWidth?: boolean | null | undefined;
|
|
114
172
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
115
173
|
type StatusBadgeStatus = NonNullable<VariantProps<typeof statusBadgeVariants>["status"]>;
|
|
@@ -141,7 +199,7 @@ interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
|
|
|
141
199
|
declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<HTMLSpanElement>>;
|
|
142
200
|
|
|
143
201
|
declare const buttonVariants: (props?: ({
|
|
144
|
-
variant?: "link" | "text" | "
|
|
202
|
+
variant?: "link" | "text" | "default" | "destructive" | "outline" | "secondary" | null | undefined;
|
|
145
203
|
size?: "icon" | "md" | "lg" | null | undefined;
|
|
146
204
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
147
205
|
type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
|
|
@@ -287,8 +345,8 @@ interface MultipleSelectionButtonProps extends MultipleSelectionButtonBaseProps
|
|
|
287
345
|
*/
|
|
288
346
|
declare const MultipleSelectionButton: react.ForwardRefExoticComponent<MultipleSelectionButtonProps & react.RefAttributes<HTMLDivElement>>;
|
|
289
347
|
|
|
290
|
-
type BaseInputProps$
|
|
291
|
-
interface
|
|
348
|
+
type BaseInputProps$2 = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
|
|
349
|
+
interface CheckBoxProps extends BaseInputProps$2 {
|
|
292
350
|
/** Marks the field as invalid (error state). Applies error color styling. */
|
|
293
351
|
invalid?: boolean;
|
|
294
352
|
/** Sets the checkbox to an indeterminate state. */
|
|
@@ -345,11 +403,11 @@ interface CheckboxProps extends BaseInputProps$1 {
|
|
|
345
403
|
* />
|
|
346
404
|
* ```
|
|
347
405
|
*/
|
|
348
|
-
declare const
|
|
406
|
+
declare const CheckBox: react.ForwardRefExoticComponent<CheckBoxProps & react.RefAttributes<HTMLInputElement>>;
|
|
349
407
|
|
|
350
408
|
type Orientation = "horizontal" | "vertical";
|
|
351
409
|
|
|
352
|
-
interface
|
|
410
|
+
interface CheckBoxGroupOption<T extends string = string> {
|
|
353
411
|
value: T;
|
|
354
412
|
label: React.ReactNode;
|
|
355
413
|
description?: React.ReactNode;
|
|
@@ -358,7 +416,7 @@ interface CheckboxGroupOption<T extends string = string> {
|
|
|
358
416
|
id?: string;
|
|
359
417
|
}
|
|
360
418
|
type BaseFieldSetProps$1 = Omit<React.HTMLAttributes<HTMLFieldSetElement>, "onChange">;
|
|
361
|
-
interface
|
|
419
|
+
interface CheckBoxGroupProps<T extends string = string> extends BaseFieldSetProps$1 {
|
|
362
420
|
/** Accessible legend/title for the group */
|
|
363
421
|
legend: React.ReactNode;
|
|
364
422
|
/** Shared name assigned to all checkboxes in this group */
|
|
@@ -366,7 +424,7 @@ interface CheckboxGroupProps<T extends string = string> extends BaseFieldSetProp
|
|
|
366
424
|
/** Layout direction */
|
|
367
425
|
orientation?: Orientation;
|
|
368
426
|
/** Checkbox options list */
|
|
369
|
-
options:
|
|
427
|
+
options: CheckBoxGroupOption<T>[];
|
|
370
428
|
/** Controlled values array */
|
|
371
429
|
value?: T[];
|
|
372
430
|
/** Uncontrolled default values array */
|
|
@@ -387,7 +445,7 @@ interface CheckboxGroupProps<T extends string = string> extends BaseFieldSetProp
|
|
|
387
445
|
/**
|
|
388
446
|
* - Fieldset wrapper managing a group of checkboxes with optional Select All,description, and orientation.
|
|
389
447
|
*/
|
|
390
|
-
declare const
|
|
448
|
+
declare const CheckBoxGroup: react.ForwardRefExoticComponent<CheckBoxGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
|
|
391
449
|
|
|
392
450
|
declare const inputVariants: (props?: ({
|
|
393
451
|
variant?: "error" | "default" | null | undefined;
|
|
@@ -660,7 +718,7 @@ declare const DateInput: react.ForwardRefExoticComponent<DateInputProps & react.
|
|
|
660
718
|
declare const dividerVariants: (props?: ({
|
|
661
719
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
662
720
|
inset?: "end" | "none" | "both" | "start" | null | undefined;
|
|
663
|
-
thickness?: "
|
|
721
|
+
thickness?: "px" | "sm" | null | undefined;
|
|
664
722
|
stretch?: "none" | "full" | null | undefined;
|
|
665
723
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
666
724
|
type DividerVariant = VariantProps<typeof dividerVariants>;
|
|
@@ -674,7 +732,7 @@ type DividerProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof d
|
|
|
674
732
|
declare const Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
675
733
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
676
734
|
inset?: "end" | "none" | "both" | "start" | null | undefined;
|
|
677
|
-
thickness?: "
|
|
735
|
+
thickness?: "px" | "sm" | null | undefined;
|
|
678
736
|
stretch?: "none" | "full" | null | undefined;
|
|
679
737
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
680
738
|
colorClassName?: string;
|
|
@@ -682,7 +740,7 @@ declare const Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTML
|
|
|
682
740
|
|
|
683
741
|
declare const fileUploadVariants: (props?: ({
|
|
684
742
|
variant?: "error" | "default" | "disabled" | "dragOver" | null | undefined;
|
|
685
|
-
size?: "
|
|
743
|
+
size?: "md" | "lg" | "sm" | null | undefined;
|
|
686
744
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
687
745
|
type FileUploadVariant = VariantProps<typeof fileUploadVariants>["variant"];
|
|
688
746
|
type FileUploadSize = VariantProps<typeof fileUploadVariants>["size"];
|
|
@@ -890,8 +948,8 @@ interface PaginationProps extends PaginationBaseProps {
|
|
|
890
948
|
*/
|
|
891
949
|
declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
|
|
892
950
|
|
|
893
|
-
type BaseInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
|
|
894
|
-
interface RadioProps extends BaseInputProps {
|
|
951
|
+
type BaseInputProps$1 = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
|
|
952
|
+
interface RadioProps extends BaseInputProps$1 {
|
|
895
953
|
/** Marks the field as invalid (error state). Applies error color styling. */
|
|
896
954
|
invalid?: boolean;
|
|
897
955
|
/** Optional visible label. Use `children` if you need custom label layout. */
|
|
@@ -990,6 +1048,57 @@ interface RadioGroupProps<T extends string = string> extends BaseFieldSetProps {
|
|
|
990
1048
|
*/
|
|
991
1049
|
declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
|
|
992
1050
|
|
|
1051
|
+
type BaseInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">;
|
|
1052
|
+
interface SwitchProps extends BaseInputProps {
|
|
1053
|
+
/** Marks the field as invalid (error state). Applies error color styling. */
|
|
1054
|
+
invalid?: boolean;
|
|
1055
|
+
/** Optional visible label displayed next to the switch. */
|
|
1056
|
+
label?: React.ReactNode;
|
|
1057
|
+
/** Optional hint/description text shown under the label for a11y. */
|
|
1058
|
+
description?: React.ReactNode;
|
|
1059
|
+
/** Id of the description element for aria-describedby; auto-wired if `description` provided. */
|
|
1060
|
+
descriptionId?: string;
|
|
1061
|
+
}
|
|
1062
|
+
/**
|
|
1063
|
+
* Switch - An accessible on/off switch built on a native checkbox.
|
|
1064
|
+
*
|
|
1065
|
+
* Features:
|
|
1066
|
+
* - Uses system design tokens for colors and typography
|
|
1067
|
+
* - Optional label and hint/description text
|
|
1068
|
+
* - Error/invalid and disabled states with proper styling
|
|
1069
|
+
* - Full keyboard navigation and screen reader support
|
|
1070
|
+
*
|
|
1071
|
+
* Notes:
|
|
1072
|
+
* - Implemented as `type="checkbox"` so it keeps the native checkbox role
|
|
1073
|
+
* while visually styled as a switch. This ensures maximum compatibility
|
|
1074
|
+
* with existing form/a11y helpers in the library.
|
|
1075
|
+
*
|
|
1076
|
+
* @example
|
|
1077
|
+
* ```tsx
|
|
1078
|
+
* // Basic usage
|
|
1079
|
+
* <Switch
|
|
1080
|
+
* id="notifications"
|
|
1081
|
+
* name="notifications"
|
|
1082
|
+
* checked={enabled}
|
|
1083
|
+
* onChange={(e) => setEnabled(e.target.checked)}
|
|
1084
|
+
* label="Notifications"
|
|
1085
|
+
* description="This is a hint text to help user."
|
|
1086
|
+
* />
|
|
1087
|
+
*
|
|
1088
|
+
* // With invalid state
|
|
1089
|
+
* <Switch
|
|
1090
|
+
* id="terms"
|
|
1091
|
+
* name="terms"
|
|
1092
|
+
* checked={accepted}
|
|
1093
|
+
* onChange={(e) => setAccepted(e.target.checked)}
|
|
1094
|
+
* label="Accept terms"
|
|
1095
|
+
* description="You must accept to continue."
|
|
1096
|
+
* invalid={!accepted && submitted}
|
|
1097
|
+
* />
|
|
1098
|
+
* ```
|
|
1099
|
+
*/
|
|
1100
|
+
declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
|
|
1101
|
+
|
|
993
1102
|
declare const selectVariants: (props?: ({
|
|
994
1103
|
variant?: "error" | "default" | null | undefined;
|
|
995
1104
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -1094,7 +1203,7 @@ declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAtt
|
|
|
1094
1203
|
|
|
1095
1204
|
declare const skeletonVariants: (props?: ({
|
|
1096
1205
|
variant?: "text" | "circle" | "rectangle" | null | undefined;
|
|
1097
|
-
size?: "
|
|
1206
|
+
size?: "md" | "lg" | "sm" | null | undefined;
|
|
1098
1207
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1099
1208
|
type SkeletonVariant = NonNullable<VariantProps<typeof skeletonVariants>["variant"]>;
|
|
1100
1209
|
type SkeletonSize = NonNullable<VariantProps<typeof skeletonVariants>["size"]>;
|
|
@@ -1375,6 +1484,19 @@ interface TimePickerProps {
|
|
|
1375
1484
|
*/
|
|
1376
1485
|
declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLDivElement>>;
|
|
1377
1486
|
|
|
1487
|
+
type CountdownUnit = "days" | "hours" | "minutes" | "seconds";
|
|
1488
|
+
type CountdownSize = "sm" | "lg";
|
|
1489
|
+
type CountdownTimeValues = Partial<Record<CountdownUnit, number>>;
|
|
1490
|
+
interface CountdownProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1491
|
+
targetDate: Date | string;
|
|
1492
|
+
displayUnits?: CountdownUnit[];
|
|
1493
|
+
size?: CountdownSize;
|
|
1494
|
+
label?: string;
|
|
1495
|
+
onComplete?: () => void;
|
|
1496
|
+
unitLabels?: Partial<Record<CountdownUnit, string>>;
|
|
1497
|
+
}
|
|
1498
|
+
declare const Countdown: react.ForwardRefExoticComponent<CountdownProps & react.RefAttributes<HTMLDivElement>>;
|
|
1499
|
+
|
|
1378
1500
|
type ToastStatus = "success" | "info" | "warn" | "error";
|
|
1379
1501
|
interface ToastAction {
|
|
1380
1502
|
label: string;
|
|
@@ -1809,6 +1931,50 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
|
|
|
1809
1931
|
*/
|
|
1810
1932
|
declare const LoadingScreen: react__default.ForwardRefExoticComponent<LoadingScreenProps & react__default.RefAttributes<HTMLDivElement>>;
|
|
1811
1933
|
|
|
1934
|
+
interface WelcomeBackgroundProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1935
|
+
/**
|
|
1936
|
+
* Optional children rendered on top of the animated background.
|
|
1937
|
+
*/
|
|
1938
|
+
children?: react__default.ReactNode;
|
|
1939
|
+
/**
|
|
1940
|
+
* Toggle ellipse animation layer.
|
|
1941
|
+
* @default true
|
|
1942
|
+
*/
|
|
1943
|
+
showEllipses?: boolean;
|
|
1944
|
+
/**
|
|
1945
|
+
* Toggle line wave animation layer.
|
|
1946
|
+
* @default true
|
|
1947
|
+
*/
|
|
1948
|
+
showLines?: boolean;
|
|
1949
|
+
/**
|
|
1950
|
+
* Disable all animations (also handled automatically for prefers-reduced-motion).
|
|
1951
|
+
* @default false
|
|
1952
|
+
*/
|
|
1953
|
+
disableAnimation?: boolean;
|
|
1954
|
+
/**
|
|
1955
|
+
* Override background image URL.
|
|
1956
|
+
*/
|
|
1957
|
+
backgroundImage?: string;
|
|
1958
|
+
/**
|
|
1959
|
+
* Override ellipse sources (defaults to bundled welcome assets).
|
|
1960
|
+
*/
|
|
1961
|
+
ellipsesData?: readonly string[];
|
|
1962
|
+
/**
|
|
1963
|
+
* Override lines overlay source (defaults to bundled welcome assets).
|
|
1964
|
+
*/
|
|
1965
|
+
linesSrc?: string;
|
|
1966
|
+
}
|
|
1967
|
+
/**
|
|
1968
|
+
* Animated background for welcome/landing experiences.
|
|
1969
|
+
* - Uses deterministic seeded randomness for stable ellipse paths.
|
|
1970
|
+
* - Honors reduced-motion preferences and optional animation disabling.
|
|
1971
|
+
* - Mobile-first; hides heavy layers on very small screens via consumer control.
|
|
1972
|
+
*/
|
|
1973
|
+
declare const WelcomeBackground: {
|
|
1974
|
+
({ className, style, children, showEllipses, showLines, disableAnimation, backgroundImage, ellipsesData, linesSrc, ...props }: WelcomeBackgroundProps): react_jsx_runtime.JSX.Element;
|
|
1975
|
+
displayName: string;
|
|
1976
|
+
};
|
|
1977
|
+
|
|
1812
1978
|
type ImageSourceMode = "both" | "url-only" | "upload-only";
|
|
1813
1979
|
interface RichTextEditorProps {
|
|
1814
1980
|
/** Controlled HTML value of the editor */
|
|
@@ -1872,6 +2038,23 @@ interface RichTextEditorProps {
|
|
|
1872
2038
|
* "url-only" so the image feature is still usable.
|
|
1873
2039
|
*/
|
|
1874
2040
|
imageSourceMode?: ImageSourceMode;
|
|
2041
|
+
/**
|
|
2042
|
+
* Maximum number of plain-text characters allowed.
|
|
2043
|
+
* If the limit is reached, further typing is prevented by the
|
|
2044
|
+
* `CharacterCount` extension.
|
|
2045
|
+
*
|
|
2046
|
+
* Non-positive or non-finite values (e.g. 0, NaN, Infinity) are treated
|
|
2047
|
+
* as "no limit".
|
|
2048
|
+
*/
|
|
2049
|
+
maxCharacters?: number;
|
|
2050
|
+
/**
|
|
2051
|
+
* Callback fired when the max character limit is reached.
|
|
2052
|
+
* Fired only once per breach (debounced until length drops below limit).
|
|
2053
|
+
*/
|
|
2054
|
+
onMaxLengthExceed?: (info: {
|
|
2055
|
+
max: number;
|
|
2056
|
+
current: number;
|
|
2057
|
+
}) => void;
|
|
1875
2058
|
}
|
|
1876
2059
|
/**
|
|
1877
2060
|
* RichTextEditor - Controlled rich text editor built on top of Tiptap.
|
|
@@ -1890,7 +2073,7 @@ interface RichTextEditorProps {
|
|
|
1890
2073
|
* import { RichTextEditor, RichTextViewer } from '@scalably/ui';
|
|
1891
2074
|
*
|
|
1892
2075
|
* function BlogPost({ post }) {
|
|
1893
|
-
* const [content, setContent] = useState(post.content);
|
|
2076
|
+
* const [content, setContent] = useState<string>(post.content);
|
|
1894
2077
|
*
|
|
1895
2078
|
* return (
|
|
1896
2079
|
* <div>
|
|
@@ -1904,7 +2087,7 @@ interface RichTextEditorProps {
|
|
|
1904
2087
|
* @see RichTextViewer - Read-only viewer component for displaying rich text content
|
|
1905
2088
|
*/
|
|
1906
2089
|
declare const RichTextEditor: {
|
|
1907
|
-
({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
|
|
2090
|
+
({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
|
|
1908
2091
|
displayName: string;
|
|
1909
2092
|
};
|
|
1910
2093
|
|
|
@@ -2005,6 +2188,12 @@ interface ScalablyUIProviderProps {
|
|
|
2005
2188
|
*/
|
|
2006
2189
|
declare const ScalablyUIProvider: React.FC<ScalablyUIProviderProps>;
|
|
2007
2190
|
|
|
2191
|
+
declare const welcomeAssets: {
|
|
2192
|
+
readonly ellipses: readonly [string, string];
|
|
2193
|
+
readonly multipleLine: string;
|
|
2194
|
+
readonly background: string;
|
|
2195
|
+
};
|
|
2196
|
+
|
|
2008
2197
|
/**
|
|
2009
2198
|
* Type for class values accepted by clsx
|
|
2010
2199
|
*/
|
|
@@ -3076,4 +3265,4 @@ interface YoutubeIconProps extends React.SVGProps<SVGSVGElement> {
|
|
|
3076
3265
|
*/
|
|
3077
3266
|
declare const YoutubeIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<YoutubeIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
|
|
3078
3267
|
|
|
3079
|
-
export { AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CaptureIcon, type CaptureIconProps,
|
|
3268
|
+
export { AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CaptureIcon, type CaptureIconProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, ErrorIcon, type ErrorIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, ImageIcon, type ImageIconProps, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InstagramIcon, type InstagramIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkedInIcon, type LinkedInIconProps, ListIcon, type ListIconProps, LoadingScreen, type LoadingScreenProps, Logo, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, RedditIcon, type RedditIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TwitchIcon, type TwitchIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, fieldErrorToProps, formatDateLocalized, logoAssets, monthsForLocale, scopeClass, throttle, toDateKey, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
|