ssovee-os-web-ui 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +17 -4
  2. package/dist/index.css +3 -0
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.d.cts +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/package.json +10 -2
  7. package/tailwind.config.js +6 -0
  8. package/theme.css +3 -0
package/README.md CHANGED
@@ -49,15 +49,28 @@ export default {
49
49
  };
50
50
  ```
51
51
 
52
- For Tailwind v4, add the package as a source in your global CSS file and load a config containing the same preset:
52
+ For Tailwind v4, import the package theme stylesheet directly in your global CSS. The package theme entry already carries the Tailwind bootstrap and library source scanning for the built dist output, so consumers do not need to repeat the `@source`/`@import "tailwindcss"` lines in their app CSS:
53
53
 
54
54
  ```css
55
- @import "tailwindcss";
56
- @source "../node_modules/ssovee-os-web-ui/dist";
57
- @config "../tailwind.config.js";
58
55
  @import "ssovee-os-web-ui/theme.css";
59
56
  ```
60
57
 
58
+ If you use a project-level `tailwind.config.js`, the package also publishes a ready-to-reference config entry that already applies the preset by default:
59
+
60
+ ```js
61
+ import ssoveePreset from "ssovee-os-web-ui/tailwind-preset";
62
+
63
+ export default {
64
+ presets: [ssoveePreset],
65
+ };
66
+ ```
67
+
68
+ You can also point your app at the published config file directly via the package export:
69
+
70
+ ```js
71
+ import ssoveePreset from "ssovee-os-web-ui/tailwind.config.js";
72
+ ```
73
+
61
74
  The preset includes the library's semantic colors (`primary`, `secondary`, `surface-*`, `brand-color`, `border-1`, and `muted`). Override the `--ssovee-*` CSS variables in your application to customize the theme.
62
75
 
63
76
  ## Usage
package/dist/index.css CHANGED
@@ -1,4 +1,7 @@
1
+ @import "tailwindcss";
2
+
1
3
  /* theme.css */
4
+ @source "./dist";
2
5
  :root {
3
6
  --ssovee-primary: 15 23 42;
4
7
  --ssovee-secondary: 30 41 59;
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../theme.css"],"sourcesContent":[":root {\n --ssovee-primary: 15 23 42;\n --ssovee-secondary: 30 41 59;\n --ssovee-surface-1: 51 65 85;\n --ssovee-surface-2: 40 53 72;\n --ssovee-surface-3: 30 41 59;\n --ssovee-surface-4: 51 65 85;\n --ssovee-brand-color: 59 130 246;\n --ssovee-border-1: 71 85 105;\n --ssovee-muted: 100 116 139;\n}\n"],"mappings":";AAAA;AACE,oBAAkB,GAAG,GAAG;AACxB,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,wBAAsB,GAAG,IAAI;AAC7B,qBAAmB,GAAG,GAAG;AACzB,kBAAgB,IAAI,IAAI;AAC1B;","names":[]}
1
+ {"version":3,"sources":["../theme.css"],"sourcesContent":["@import \"tailwindcss\";\n@source \"./dist\";\n\n:root {\n --ssovee-primary: 15 23 42;\n --ssovee-secondary: 30 41 59;\n --ssovee-surface-1: 51 65 85;\n --ssovee-surface-2: 40 53 72;\n --ssovee-surface-3: 30 41 59;\n --ssovee-surface-4: 51 65 85;\n --ssovee-brand-color: 59 130 246;\n --ssovee-border-1: 71 85 105;\n --ssovee-muted: 100 116 139;\n}\n"],"mappings":";;;AACA,QAAQ;AAER;AACE,oBAAkB,GAAG,GAAG;AACxB,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,sBAAoB,GAAG,GAAG;AAC1B,wBAAsB,GAAG,IAAI;AAC7B,qBAAmB,GAAG,GAAG;AACzB,kBAAgB,IAAI,IAAI;AAC1B;","names":[]}
package/dist/index.d.cts CHANGED
@@ -299,4 +299,4 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
299
299
  declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
300
300
  declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
301
301
 
302
- export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps };
302
+ export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownOption, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps };
package/dist/index.d.ts CHANGED
@@ -299,4 +299,4 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
299
299
  declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
300
300
  declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
301
301
 
302
- export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps };
302
+ export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownOption, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ssovee-os-web-ui",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "description": "Reusable UI component library for shared applications.",
5
5
  "author": "SSOVEE",
6
6
  "license": "MIT",
@@ -30,6 +30,7 @@
30
30
  "require": "./dist/index.cjs"
31
31
  },
32
32
  "./tailwind-preset": "./tailwind-preset.js",
33
+ "./tailwind.config.js": "./tailwind.config.js",
33
34
  "./theme.css": "./theme.css"
34
35
  },
35
36
  "files": [
@@ -37,12 +38,14 @@
37
38
  "README.md",
38
39
  "LICENSE",
39
40
  "tailwind-preset.js",
41
+ "tailwind.config.js",
40
42
  "theme.css"
41
43
  ],
42
44
  "scripts": {
43
45
  "build": "tsup",
44
46
  "prepublishOnly": "npm run typecheck && npm run build",
45
47
  "typecheck": "tsc --noEmit",
48
+ "test": "vitest run",
46
49
  "release:patch": "npm version patch",
47
50
  "release:minor": "npm version minor",
48
51
  "release:major": "npm version major",
@@ -57,10 +60,15 @@
57
60
  "@phosphor-icons/react": ">=2"
58
61
  },
59
62
  "devDependencies": {
63
+ "@testing-library/jest-dom": "^6.9.1",
64
+ "@testing-library/react": "^16.3.2",
65
+ "@testing-library/user-event": "^14.6.1",
60
66
  "@types/react": "^18.3.12",
61
67
  "@types/react-dom": "^18.3.1",
68
+ "jsdom": "^29.1.1",
62
69
  "tsup": "^8.3.3",
63
- "typescript": "^5.7.2"
70
+ "typescript": "^5.7.2",
71
+ "vitest": "^4.1.10"
64
72
  },
65
73
  "publishConfig": {
66
74
  "access": "public"
package/tailwind.config.js ADDED
@@ -0,0 +1,6 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+ import ssoveePreset from "./tailwind-preset.js";
3
+
4
+ export default {
5
+ presets: [ssoveePreset],
6
+ };
package/theme.css CHANGED
@@ -1,3 +1,6 @@
1
+ @import "tailwindcss";
2
+ @source "./dist";
3
+
1
4
  :root {
2
5
  --ssovee-primary: 15 23 42;
3
6
  --ssovee-secondary: 30 41 59;