@bcgov/design-system-react-components 0.0.1 → 0.0.3

package/dist/esm/types/components/Button/Button.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps as ReactAriaButtonProps } from "react-aria-components";
+import "./Button.css";
+export interface ButtonProps extends ReactAriaButtonProps {
+    size?: "small" | "medium";
+    variant?: "primary" | "secondary" | "tertiary" | "link";
+    danger?: boolean;
+    isIconButton?: boolean;
+}
+export default function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+export type { ButtonProps } from "./Button";

package/dist/esm/types/components/Select/Select.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { Key, ListBoxItemProps as ReactAriaListBoxItemProps, SelectProps as ReactAriaSelectProps } from "react-aria-components";
+import "./Select.css";
+export interface ListBoxItemProps extends ReactAriaListBoxItemProps {
+    /** Text label for the option. Provide an `id` if this is not unique. */
+    label: string;
+    /** Descriptive text that appears below the option's label */
+    description?: string;
+    /** Marks an option visually with red text to indicate danger */
+    isDestructive?: boolean;
+    /** Left icon slot */
+    iconLeft?: React.ReactElement;
+    /** Right icon slot */
+    iconRight?: React.ReactElement;
+}
+export interface SelectionSectionProps {
+    /** Display name for the section */
+    id: Key;
+    header?: string;
+    items: ListBoxItemProps[];
+}
+export interface SelectProps<T extends object> extends ReactAriaSelectProps<T> {
+    items?: ListBoxItemProps[];
+    sections?: SelectionSectionProps[];
+    /** Text label for the Select component */
+    label?: string;
+    /** Defaults to `medium` */
+    size?: "small" | "medium";
+}
+export default function Select<T extends object>({ items, sections, label, size, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Select";
+export type { SelectProps } from "./Select";

package/dist/esm/types/components/SelectItem/SelectItem.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ListBoxItemProps } from "react-aria-components";
+import "./SelectItem.css";
+export interface SelectItemProps extends ListBoxItemProps {
+    /** Text label for the option. Provide an `id` if this is not unique. */
+    label: string;
+    /** Descriptive text that appears below the option's label */
+    description?: string;
+    /** Marks an option visually with red text to indicate danger */
+    isDestructive?: boolean;
+    /** Left icon slot */
+    iconLeft?: React.ReactElement;
+    /** Right icon slot */
+    iconRight?: React.ReactElement;
+}
+export default function SelectItem({ description, id, iconLeft, iconRight, isDestructive, label, }: SelectItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/SelectItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./SelectItem";
+export type { SelectItemProps } from "./SelectItem";

package/dist/esm/types/components/Tag/Tag.d.ts

@@ -1,10 +1,7 @@
-import { Key } from "react";
+/// <reference types="react" />
 import { TagProps as ReactAriaTagProps } from "react-aria-components";
-import "@bcgov/design-tokens/css/variables.css";
-import "@bcgov/bc-sans/css/BC_Sans.css";
 import "./Tag.css";
 export interface TagProps extends ReactAriaTagProps {
-    id: Key;
     icon?: React.ReactNode;
     color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
 }

package/dist/esm/types/components/index.d.ts

@@ -1,3 +1,7 @@
+import "@bcgov/design-tokens/css/variables.css";
+export { default as Button } from "./Button";
+export { default as Select } from "./Select";
+export { default as SelectItem } from "./SelectItem";
 export { default as Tag } from "./Tag";
 export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";

package/dist/index.d.ts

@@ -1,9 +1,59 @@
+/// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Key } from 'react';
-import { TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1 } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1 } from 'react-aria-components';
+import React$1 from 'react';
 
-interface TagProps extends TagProps$1 {
+interface ButtonProps extends ButtonProps$1 {
+    size?: "small" | "medium";
+    variant?: "primary" | "secondary" | "tertiary" | "link";
+    danger?: boolean;
+    isIconButton?: boolean;
+}
+declare function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ListBoxItemProps extends ListBoxItemProps$1 {
+    /** Text label for the option. Provide an `id` if this is not unique. */
+    label: string;
+    /** Descriptive text that appears below the option's label */
+    description?: string;
+    /** Marks an option visually with red text to indicate danger */
+    isDestructive?: boolean;
+    /** Left icon slot */
+    iconLeft?: React$1.ReactElement;
+    /** Right icon slot */
+    iconRight?: React$1.ReactElement;
+}
+interface SelectionSectionProps {
+    /** Display name for the section */
     id: Key;
+    header?: string;
+    items: ListBoxItemProps[];
+}
+interface SelectProps<T extends object> extends SelectProps$1<T> {
+    items?: ListBoxItemProps[];
+    sections?: SelectionSectionProps[];
+    /** Text label for the Select component */
+    label?: string;
+    /** Defaults to `medium` */
+    size?: "small" | "medium";
+}
+declare function Select<T extends object>({ items, sections, label, size, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SelectItemProps extends ListBoxItemProps$1 {
+    /** Text label for the option. Provide an `id` if this is not unique. */
+    label: string;
+    /** Descriptive text that appears below the option's label */
+    description?: string;
+    /** Marks an option visually with red text to indicate danger */
+    isDestructive?: boolean;
+    /** Left icon slot */
+    iconLeft?: React$1.ReactElement;
+    /** Right icon slot */
+    iconRight?: React$1.ReactElement;
+}
+declare function SelectItem({ description, id, iconLeft, iconRight, isDestructive, label, }: SelectItemProps): react_jsx_runtime.JSX.Element;
+
+interface TagProps extends TagProps$1 {
     icon?: React.ReactNode;
     color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
 }
@@ -22,4 +72,4 @@ interface TagListProps<T> extends Pick<TagListProps$1<T>, "children" | "renderEm
 }
 declare function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>): react_jsx_runtime.JSX.Element;
 
-export { Tag, TagGroup, TagList };
+export { Button, Select, SelectItem, Tag, TagGroup, TagList };

package/dist/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BC Design System React Components Vite Kitchen Sink</title>
+    <script type="module" crossorigin src="/assets/index-yaBoZILt.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-t1vEzjyT.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
-    "vite": "vite",
-    "build-vite": "tsc && vite build",
+    "rollup": "rollup -c --bundleConfigAsCjs",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "rollup": "rollup -c --bundleConfigAsCjs"
+    "storybook-dev": "storybook dev -p 6006",
+    "storybook-build": "storybook build",
+    "vite-dev": "vite",
+    "vite-build": "tsc && vite build",
+    "vite-preview": "vite preview"
   },
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.js",
@@ -18,44 +18,44 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@bcgov/bc-sans": "^2.1.0",
-    "@bcgov/design-tokens": "^1.0.0",
-    "react-aria-components": "^1.0.0-rc.0"
+    "@bcgov/design-tokens": "^2.0.1",
+    "react-aria-components": "1.0.1"
   },
   "peerDependencies": {
+    "@bcgov/bc-sans": "^2.1.0",
     "react": "^16.14.0 || ^17.0.0-rc.1 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "devDependencies": {
     "@react-stately/data": "^3.10.3",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^8.0.0-alpha.17",
+    "@storybook/addon-interactions": "^8.0.0-alpha.17",
+    "@storybook/addon-links": "^8.0.0-alpha.17",
+    "@storybook/blocks": "^8.0.0-alpha.17",
+    "@storybook/react": "^8.0.0-alpha.17",
+    "@storybook/react-vite": "^8.0.0-alpha.17",
     "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
+    "@types/react": "^18.2.51",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.6.15",
-    "rollup": "^4.3.0",
+    "rollup": "^4.9.6",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.5.3",
+    "storybook": "^8.0.0-alpha.17",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.5"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
   },
   "author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
   "license": "Apache-2.0",