@keeper-security/keeper-js-ui 0.1.1 → 0.2.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/CHANGELOG.md +48 -0
- package/README.md +93 -15
- package/dist/index.es.d.ts +54 -21
- package/dist/index.es.js +620 -445
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +4 -2
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## [0.2.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.1.2...v0.2.0) (2024-11-27)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* add Box component ([#74](https://github.com/Keeper-Security/keeper-js-ui/issues/74)) ([ab0208f](https://github.com/Keeper-Security/keeper-js-ui/commit/ab0208fe6763e6d44cfdb36ed2815eddd7471dde))
|
|
9
|
+
* add Separator component ([#30](https://github.com/Keeper-Security/keeper-js-ui/issues/30)) ([fd7554f](https://github.com/Keeper-Security/keeper-js-ui/commit/fd7554fee2377cf3bddc5e816a1beec9d6174b1b))
|
|
10
|
+
* **flex:** additional flex options and backward compatibility ([#109](https://github.com/Keeper-Security/keeper-js-ui/issues/109)) ([9b9e0c6](https://github.com/Keeper-Security/keeper-js-ui/commit/9b9e0c6353a970d6e548d66dee818682ee47dda9))
|
|
11
|
+
|
|
12
|
+
## [0.1.2](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.1.1...v0.1.2) (2024-11-22)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* **flex:** enforce number types to be of type number ([#101](https://github.com/Keeper-Security/keeper-js-ui/issues/101)) ([03202f5](https://github.com/Keeper-Security/keeper-js-ui/commit/03202f53e90bb357605bf9911ed0e6dc31162ef4)), closes [#100](https://github.com/Keeper-Security/keeper-js-ui/issues/100)
|
|
18
|
+
|
|
19
|
+
## [0.1.1](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.1.0...v0.1.1) (2024-11-19)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
* **button:** add contrast color rules and animation ([#87](https://github.com/Keeper-Security/keeper-js-ui/issues/87)) ([7fa8a18](https://github.com/Keeper-Security/keeper-js-ui/commit/7fa8a18155e04eab709a68e06e8af4263cdbe13a))
|
|
25
|
+
* **button:** force tabIndex for Safari ([#96](https://github.com/Keeper-Security/keeper-js-ui/issues/96)) ([ac418f3](https://github.com/Keeper-Security/keeper-js-ui/commit/ac418f37e29f62c3ef7ec774eb2ad055a6bd31e3)), closes [#83](https://github.com/Keeper-Security/keeper-js-ui/issues/83)
|
|
26
|
+
|
|
27
|
+
## 0.1.0 (2024-10-30)
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
### Features
|
|
31
|
+
|
|
32
|
+
* add Flex component ([#73](https://github.com/Keeper-Security/keeper-js-ui/issues/73)) ([deee6d1](https://github.com/Keeper-Security/keeper-js-ui/commit/deee6d1b5e4d75b3b26b7f384252070c73677899))
|
|
33
|
+
* Default and Primary Buttons ([#82](https://github.com/Keeper-Security/keeper-js-ui/issues/82)) ([149bff4](https://github.com/Keeper-Security/keeper-js-ui/commit/149bff4a5e1441eebd5d2d018156b79bc322c3c0)), closes [#81](https://github.com/Keeper-Security/keeper-js-ui/issues/81)
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
### Bug Fixes
|
|
37
|
+
|
|
38
|
+
* **storybook:** remove unnecessary rtl plugin fix ([#52](https://github.com/Keeper-Security/keeper-js-ui/issues/52)) ([b3842d3](https://github.com/Keeper-Security/keeper-js-ui/commit/b3842d3e0b9625c4b059c02dd76a62ff9baefb00))
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### Reverts
|
|
42
|
+
|
|
43
|
+
* **storybook:** restore withDirection decorator ([#72](https://github.com/Keeper-Security/keeper-js-ui/issues/72)) ([bb4e05e](https://github.com/Keeper-Security/keeper-js-ui/commit/bb4e05ed775da51ed33ecf965ba264f80bab2526))
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
### Miscellaneous Chores
|
|
47
|
+
|
|
48
|
+
* release 0.1.0 ([#70](https://github.com/Keeper-Security/keeper-js-ui/issues/70)) ([db31448](https://github.com/Keeper-Security/keeper-js-ui/commit/db31448edb1c8dcc35bc8ba3b6ce6de3af912719))
|
package/README.md
CHANGED
|
@@ -61,7 +61,8 @@ npm run components:add badge
|
|
|
61
61
|
|
|
62
62
|
Any dependency installs or project updates will be handled automatically. The new component file will be created in [src/components/ui/](./src/components/ui/).
|
|
63
63
|
|
|
64
|
-
>
|
|
64
|
+
> [!TIP]
|
|
65
|
+
> Create a specific story for your component to explore its features and demonstrate its different states. [What's a story?](https://storybook.js.org/docs/get-started/whats-a-story)
|
|
65
66
|
|
|
66
67
|
### Diff'ing a shadcn/ui Component
|
|
67
68
|
|
|
@@ -81,11 +82,13 @@ Probably not super helpful, but it's there.
|
|
|
81
82
|
|
|
82
83
|
### Creating a Story
|
|
83
84
|
|
|
84
|
-
>
|
|
85
|
+
> [!TIP]
|
|
86
|
+
> Visit the [Storybook Tutorial](https://storybook.js.org/tutorials/) section for a better understanding of [Component-Driven Development (CDD)](https://www.componentdriven.org/) and the [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf).
|
|
85
87
|
|
|
86
88
|
Stories are chunks of code that render a component and give you the opportunity to configure its props. The naming convention of a story is `<component>.stories.ts`.
|
|
87
89
|
|
|
88
|
-
>
|
|
90
|
+
> [!IMPORTANT]
|
|
91
|
+
> If your story is more complex and requires [jsx](https://react.dev/learn/writing-markup-with-jsx), you'll have to name it with a `.tsx` extension: `<component>.stories.tsx`. Otherwise, you will get several cryptic linting errors within your jsx.
|
|
89
92
|
|
|
90
93
|
#### Minimal Story Example
|
|
91
94
|
|
|
@@ -161,13 +164,15 @@ For a real-time experience where all of Tailwind CSS is available to your storyb
|
|
|
161
164
|
|
|
162
165
|
This will allow you to use any standard Tailwind CSS classes within the `className` control textfield, but it will slow Storybook rendering saved changes to your stories and components. At this time, arbitrary values (using `[]` notation, such as `w-[1234px]`) will not work, but you will have access to a `style` object.
|
|
163
166
|
|
|
164
|
-
>
|
|
167
|
+
> [!IMPORTANT]
|
|
168
|
+
> If you don't already have a `.env.local` file, copy the contents of the `.env` file into the root and update the values as necessary. Never commit your changes to the `.env` file unless you are adding or removing a default key/value pair and sharing those values within the `git log` pose no security risks. Changes to your `.env.local` are ignored by git and will not get picked up as unstaged changes.
|
|
165
169
|
|
|
166
170
|
### Changing Themes in Storybook
|
|
167
171
|
|
|
168
172
|
[Storybook's Themes Addon](https://storybook.js.org/addons/@storybook/addon-themes) has been configured to pick between the `light` or `dark` theme based on your system settings. You can use the Theme button in the Storybook toolbar to switch themes manually should you need to test a component in another theme.
|
|
169
173
|
|
|
170
|
-
>
|
|
174
|
+
> [!NOTE]
|
|
175
|
+
> Some pages, such as `Docs`, will always render the `light` theme regardless of the selected theme. The component itself will render in the correct theme but the surrounding UI will not. Switch to an actual story to see the full page rendered as the chosen theme.
|
|
171
176
|
|
|
172
177
|
There are four themes to choose from:
|
|
173
178
|
|
|
@@ -176,7 +181,8 @@ There are four themes to choose from:
|
|
|
176
181
|
- high contrast light
|
|
177
182
|
- high contrast dark
|
|
178
183
|
|
|
179
|
-
>
|
|
184
|
+
> [!NOTE]
|
|
185
|
+
> The `high contrast *` themes will make best efforts to render components using an example of simplified [system colors](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color). This is to be used only as a quick reference, not as a source of truth. For accurate representations of component rendering in these modes, refer to [triggering forced-colors/high contrast modes](#triggering-forced-colorshigh-contrast-modes).
|
|
180
186
|
|
|
181
187
|
#### Triggering Forced-Colors/High Contrast Modes
|
|
182
188
|
|
|
@@ -267,6 +273,44 @@ re #JIRA-1234
|
|
|
267
273
|
|
|
268
274
|
Enforcing commit message standards helps with automating the [CHANGELOG](./CHANGELOG) updates, [package.json](./package.json) version bumps, and release [tags](https://github.com/Keeper-Security/keeper-js-ui/tags).
|
|
269
275
|
|
|
276
|
+
## Pull Requests
|
|
277
|
+
|
|
278
|
+
In your pull requests, it's recommended to choose `Squash and merge` to keep the git history easy to read and parse.
|
|
279
|
+
|
|
280
|
+
### Dependabot PRs
|
|
281
|
+
|
|
282
|
+
Occassionally, a PR might be created when a security patch is available from one of the dependencies.
|
|
283
|
+
|
|
284
|
+
> [!TIP]
|
|
285
|
+
> It's always a good idea to `git pull` and `git checkout` that branch locally to run some smoke tests before merging.
|
|
286
|
+
|
|
287
|
+
```
|
|
288
|
+
npm ci && npm run build && npm start
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
If you want to take an additional step to smoke test, you can run `npm test` in a new terminal while `npm start` is still running.
|
|
292
|
+
|
|
293
|
+
### Release PRs
|
|
294
|
+
|
|
295
|
+
Whenever a PR is merged into the `main` branch, a [Release Github Action](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/release-please.yml) is automatically triggered to parse through the git history for certain keywords.
|
|
296
|
+
|
|
297
|
+
Based on the existence of these keywords, a new PR may be created automatically with updates to `package.json`, `package-lock.json`, and `CHANGELOG.md`.
|
|
298
|
+
|
|
299
|
+
Once that PR is merged into `main`, a release tag is created. See [Publishing an NPM Package](#publishing-an-npm-package) for more info.
|
|
300
|
+
|
|
301
|
+
### Merging
|
|
302
|
+
|
|
303
|
+
Choose `Squash and merge` when you're ready to merge your PR.
|
|
304
|
+
|
|
305
|
+
You can use certain [keywords](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/using-keywords-in-issues-and-pull-requests) in your PR description or one of your commit message footers to link or close an issue or pull request.
|
|
306
|
+
|
|
307
|
+
> [!TIP]
|
|
308
|
+
> Link multiple issues by comma-separating and repeating all keyword commands.
|
|
309
|
+
>
|
|
310
|
+
> ```
|
|
311
|
+
> closes #76, closes #77, fixes #100
|
|
312
|
+
> ```
|
|
313
|
+
|
|
270
314
|
## Under the Hood Technologies
|
|
271
315
|
|
|
272
316
|
Inspect the [package.json](./package.json) `dependencies` and `devDependencies` sections for the full list of technologies.
|
|
@@ -313,19 +357,20 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
|
|
|
313
357
|
|
|
314
358
|
### Configuration files
|
|
315
359
|
|
|
316
|
-
- [.husky/\*](./.husky/) => [Husky](https://typicode.github.io/husky/how-to.html)
|
|
317
|
-
- [.storybook/\*](./.storybook/) => [Storybook](https://storybook.js.org/docs/get-started/setup)
|
|
318
|
-
- [.commitlintrc.cjs](./.commitlintrc.cjs) => [commitlint](https://commitlint.js.org/reference/configuration.html)
|
|
319
360
|
- [.czrc](./.czrc) => [cz-cli/commitizen](https://github.com/commitizen/cz-cli#readme)
|
|
320
|
-
- [.
|
|
321
|
-
- [.lintstagedrc.cjs](./.lintstagedrc.cjs) => [Lint Staged](https://github.com/lint-staged/lint-staged?tab=readme-ov-file#configuration)
|
|
361
|
+
- [.husky/\*](./.husky/) => [Husky](https://typicode.github.io/husky/how-to.html)
|
|
322
362
|
- [.nvmrc](./.nvmrc) => [nvm](https://github.com/nvm-sh/nvm#readme)
|
|
323
363
|
- [.prettierrc](./.prettierrc) => [Prettier](https://prettier.io/docs/en/configuration.html)
|
|
364
|
+
- [.storybook/\*](./.storybook/) => [Storybook](https://storybook.js.org/docs/get-started/setup)
|
|
365
|
+
- [commitlint.config.js](./commitlint.config.js) => [commitlint](https://commitlint.js.org/reference/configuration.html)
|
|
324
366
|
- [components.json](./components.json) => [shadcn/ui](https://ui.shadcn.com/docs/components-json)
|
|
367
|
+
- [eslint.config.js](./eslint.config.js) => [ESLint](https://eslint.org/docs/latest/use/configure/)
|
|
368
|
+
- [lint-staged.config.js](./lint-staged.config.js) => [Lint Staged](https://github.com/lint-staged/lint-staged?tab=readme-ov-file#configuration)
|
|
325
369
|
- [postcss.config.js](./postcss.config.js) => [PostCSS](https://github.com/postcss/postcss#readme)
|
|
326
370
|
- [tailwind.config.js](./tailwind.config.js) => [Tailwind CSS](https://tailwindcss.com/docs/configuration)
|
|
327
371
|
- [tsconfig{.app,.node}.json](./tsconfig.json) => [TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
|
|
328
372
|
- [vite.config.ts](./vite.config.ts) => [Vite](https://vitejs.dev/config/)
|
|
373
|
+
- [vitest.workspace.ts](./vitest.workspace.ts) => [Vitest](https://vitest.dev/)
|
|
329
374
|
|
|
330
375
|
## Production Build
|
|
331
376
|
|
|
@@ -337,15 +382,48 @@ npm run build
|
|
|
337
382
|
|
|
338
383
|
This process inspects the [src/index.ts](./src/index.ts) file and pulls in only the necessary code. Packages listed under [package.json's](./package.json) `peerDependencies` will be ignored and left to the external implementations to install separately. This avoids redundancy and keeps file sizes down.
|
|
339
384
|
|
|
340
|
-
A
|
|
385
|
+
A `dist` folder will be created at the root of the project. This folder is ignored by `git`, so you shouldn't show any changes that need to be committied. The four files created are:
|
|
341
386
|
|
|
342
387
|
- style.css - All of the necessary CSS including [Tailwind CSS](https://tailwindcss.com/) utility classes.
|
|
343
388
|
- index.es.d.ts - All of the necessary type information.
|
|
344
389
|
- index.es.js - All of the exported components in ES Modules format.
|
|
345
390
|
- index.umd.js - All of the exported components in the Universal Module Definition (fallback) format.
|
|
346
391
|
|
|
347
|
-
>
|
|
392
|
+
> [!TIP]
|
|
393
|
+
> Learn more about [npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) if you want to bypass the npm registry and install this library to another project locally.
|
|
394
|
+
>
|
|
395
|
+
> `npm link` can be flakey, so the alternative would be run [npm pack](https://docs.npmjs.com/cli/v9/commands/npm-pack) to create a local \*.tgz file and install that file in your external project.
|
|
396
|
+
|
|
397
|
+
## Publishing an NPM Package
|
|
398
|
+
|
|
399
|
+
Once a [Release PR](#release-prs) is merged and a new release tag is automatically created, you will want to run the [Publish to NPM](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/npm-publish.yml) action.
|
|
400
|
+
|
|
401
|
+
This action will run the necessary commands to get a new production build of the library up to NPM for the external projects to download any new features.
|
|
402
|
+
|
|
403
|
+
> [!NOTE]
|
|
404
|
+
> The code changes picked up should only relate to code being used by external projects.
|
|
405
|
+
>
|
|
406
|
+
> Internal code, such as Storybook stories or build configurations, should not be considered worthy of a new package update.
|
|
407
|
+
>
|
|
408
|
+
> Changes such as a new `Button` or breaking API changes to `Select` _would_ constitute a package update.
|
|
409
|
+
>
|
|
410
|
+
> These decisions are handled automatically based on your `git commit` messages. See [Committing Changes](#committing-changes) for more info.
|
|
411
|
+
|
|
412
|
+
## Documentation Alerts/Callouts
|
|
413
|
+
|
|
414
|
+
These additional markers describing the type of callout will be picked up and styled accordingly using Github's [Alerts](https://docs.github.com/en/contributing/writing-for-github-docs/using-markdown-and-liquid-in-github-docs#alerts) markdown.
|
|
415
|
+
|
|
416
|
+
> [!NOTE]
|
|
417
|
+
> Highlights information that users should take into account, even when skimming.
|
|
418
|
+
|
|
419
|
+
> [!TIP]
|
|
420
|
+
> Optional information to help a user be more successful.
|
|
421
|
+
|
|
422
|
+
> [!IMPORTANT]
|
|
423
|
+
> Crucial information necessary for users to succeed.
|
|
348
424
|
|
|
349
|
-
|
|
425
|
+
> [!WARNING]
|
|
426
|
+
> Critical content demanding immediate user attention due to potential risks.
|
|
350
427
|
|
|
351
|
-
|
|
428
|
+
> [!CAUTION]
|
|
429
|
+
> Negative potential consequences of an action.
|
package/dist/index.es.d.ts
CHANGED
|
@@ -1,7 +1,33 @@
|
|
|
1
1
|
import { ClassProp } from 'class-variance-authority/dist/types';
|
|
2
2
|
import * as React_2 from 'react';
|
|
3
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
3
4
|
import { VariantProps } from 'class-variance-authority';
|
|
4
5
|
|
|
6
|
+
export declare const Box: React_2.ForwardRefExoticComponent<BoxProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
|
|
8
|
+
declare interface BoxProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof boxVariants> {
|
|
9
|
+
as?: 'div' | 'span';
|
|
10
|
+
asChild?: boolean;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
declare const boxVariants: (props?: ({
|
|
14
|
+
p?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
15
|
+
pb?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
16
|
+
pe?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
17
|
+
ps?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
18
|
+
pt?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
19
|
+
px?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
20
|
+
py?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
21
|
+
m?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
22
|
+
mb?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
23
|
+
me?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
24
|
+
ms?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
25
|
+
mt?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
26
|
+
mx?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
27
|
+
my?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
28
|
+
display?: "none" | "block" | "inline-block" | null | undefined;
|
|
29
|
+
} & ClassProp) | undefined) => string;
|
|
30
|
+
|
|
5
31
|
export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
6
32
|
|
|
7
33
|
declare interface ButtonProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
|
|
@@ -11,9 +37,10 @@ declare interface ButtonProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButt
|
|
|
11
37
|
}
|
|
12
38
|
|
|
13
39
|
declare const buttonVariants: (props?: ({
|
|
14
|
-
variant?: "solid" | "plain" | null | undefined;
|
|
15
|
-
color?: "neutral" | "primary" | null | undefined;
|
|
40
|
+
variant?: "solid" | "outline" | "plain" | "link" | null | undefined;
|
|
41
|
+
color?: "neutral" | "primary" | "secondary" | null | undefined;
|
|
16
42
|
fullWidth?: boolean | null | undefined;
|
|
43
|
+
size?: "md" | "icon" | null | undefined;
|
|
17
44
|
} & ClassProp) | undefined) => string;
|
|
18
45
|
|
|
19
46
|
export declare const Flex: React_2.ForwardRefExoticComponent<FlexProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
@@ -21,31 +48,37 @@ export declare const Flex: React_2.ForwardRefExoticComponent<FlexProps & React_2
|
|
|
21
48
|
declare interface FlexProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
|
|
22
49
|
as?: 'div' | 'span';
|
|
23
50
|
asChild?: boolean;
|
|
51
|
+
tooltip?: string;
|
|
24
52
|
}
|
|
25
53
|
|
|
26
54
|
declare const flexVariants: (props?: ({
|
|
55
|
+
self?: "end" | "start" | "center" | "auto" | "baseline" | "stretch" | null | undefined;
|
|
56
|
+
shrink?: 0 | 1 | null | undefined;
|
|
27
57
|
wrap?: "wrap" | "nowrap" | "reverse" | null | undefined;
|
|
28
|
-
p?:
|
|
29
|
-
pb?:
|
|
30
|
-
pe?:
|
|
31
|
-
ps?:
|
|
32
|
-
pt?:
|
|
33
|
-
px?:
|
|
34
|
-
py?:
|
|
35
|
-
m?:
|
|
36
|
-
mb?:
|
|
37
|
-
me?:
|
|
38
|
-
ms?:
|
|
39
|
-
mt?:
|
|
40
|
-
mx?:
|
|
41
|
-
my?:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
p?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
59
|
+
pb?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
60
|
+
pe?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
61
|
+
ps?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
62
|
+
pt?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
63
|
+
px?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
64
|
+
py?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
65
|
+
m?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
66
|
+
mb?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
67
|
+
me?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
68
|
+
ms?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
69
|
+
mt?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
70
|
+
mx?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
71
|
+
my?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | "auto" | null | undefined;
|
|
72
|
+
grow?: 0 | 1 | null | undefined;
|
|
73
|
+
justify?: "end" | "start" | "center" | "baseline" | "stretch" | "around" | "between" | "evenly" | "normal" | null | undefined;
|
|
74
|
+
gap?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
75
|
+
gapColumn?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
76
|
+
gapRow?: 0 | "px" | 1 | 16 | 2 | 0.5 | 1.5 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined;
|
|
77
|
+
align?: "end" | "start" | "center" | "baseline" | "stretch" | null | undefined;
|
|
47
78
|
direction?: "row" | "column-reverse" | "row-reverse" | "column" | null | undefined;
|
|
48
79
|
display?: "flex" | "none" | "inline-flex" | null | undefined;
|
|
49
80
|
} & ClassProp) | undefined) => string;
|
|
50
81
|
|
|
82
|
+
export declare const Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
83
|
+
|
|
51
84
|
export { }
|