@bccampus/ui-components 0.8.0 → 0.8.2

package/README.md

@@ -1,69 +1,3 @@
-# React + TypeScript + Vite
+# @bccampus/ui-components
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+BCcampus React components

package/dist/components/ui/composite/SelectionManager/AbstractSelectionManager.js

@@ -1,5 +1,6 @@
-import { atom } from "nanostores";
+import { atom, onSet } from "nanostores";
 import { CompositeDataItem } from "../CompositeDataItem.js";
+import { symmetricDifference } from "../../../../lib/set-operations.js";
 class AbstractSelectionManager {
   data;
   dataOptions;
@@ -16,6 +17,10 @@ class AbstractSelectionManager {
     } else {
       this.dataOptions.selectedKeys.forEach((selectedKey) => this.select(selectedKey));
     }
+    onSet(this.selectedKeys, ({ newValue, abort }) => {
+      const diff = symmetricDifference(this.selectedKeys.get(), newValue);
+      if (diff.size === 0) abort();
+    });
   }
   getSelectedKeys() {
     return this.selectedKeys.get();

package/dist/components/ui/page-section.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cn } from "../../_chunks/utils.js";
 import { c as cva } from "../../_chunks/index2.js";
-const pageSectionVariants = cva("group @container/page-section relative w-full", {
+const pageSectionVariants = cva("group @container/page-section relative w-full text-foreground", {
   variants: {
     px: {
       none: "px-0",

package/dist/components/ui/typography/caption.js

@@ -5,7 +5,7 @@ import { c as cn } from "../../../_chunks/utils.js";
 const captionVariants = cva("tracking-tight text-balance", {
   variants: {
     variant: {
-      default: "scroll-mr-5 text-lg/5 font-bold text-secondary dark:text-foreground",
+      default: "scroll-mr-5 text-lg/5 font-bold text-secondary",
       light: "scroll-mr-4 text-sm/4 font-normal text-primary"
     }
   },

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.8.0",
+  "version": "0.8.2",
+  "description": "BCcampus React components",
   "type": "module",
   "exports": {
     ".": {
@@ -74,4 +75,4 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}

package/src/components/ui/card.tsx

@@ -60,7 +60,7 @@ function CardTitle({ size = "md", className, ...props }: CardTitleProps) {
           "heading-2": size === "md",
           "heading-3": size === "sm",
         },
-        className
+        className,
       )}
       {...props}
     />
@@ -76,7 +76,7 @@ function CardSubtitle({ size = "md", className, ...props }: CardTitleProps) {
           "heading-3": size === "md",
           "text-base": size === "sm",
         },
-        className
+        className,
       )}
       {...props}
     />

package/src/components/ui/composite/SelectionManager/AbstractSelectionManager.ts

@@ -1,8 +1,9 @@
-import { atom, type PreinitializedWritableAtom } from "nanostores";
+import { atom, onSet, type PreinitializedWritableAtom } from "nanostores";
 import type { CompositeData } from "../CompositeData";
 import { CompositeDataItem } from "../CompositeDataItem";
 import type { CompositeDataOptions, CompositeItemKey } from "../types";
 import type { SelectionManager, SelectionManagerOptions } from "./types";
+import { symmetricDifference } from "@/lib";
 
 export abstract class AbstractSelectionManager<T extends object> implements SelectionManager<T> {
   protected data!: CompositeData<T>;
@@ -27,6 +28,11 @@ export abstract class AbstractSelectionManager<T extends object> implements Sele
       // Set default selected items
       this.dataOptions.selectedKeys.forEach((selectedKey) => this.select(selectedKey));
     }
+
+    onSet(this.selectedKeys, ({ newValue, abort }) => {
+      const diff = symmetricDifference(this.selectedKeys.get(), newValue);
+      if (diff.size === 0) abort();
+    });
   }
 
   getSelectedKeys() {

package/src/components/ui/page-section.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
-const pageSectionVariants = cva("group @container/page-section relative w-full", {
+const pageSectionVariants = cva("group @container/page-section relative w-full text-foreground", {
   variants: {
     px: {
       none: "px-0",

package/src/components/ui/typography/caption.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
 const captionVariants = cva("tracking-tight text-balance", {
   variants: {
     variant: {
-      default: "scroll-mr-5 text-lg/5 font-bold text-secondary dark:text-foreground",
+      default: "scroll-mr-5 text-lg/5 font-bold text-secondary",
       light: "scroll-mr-4 text-sm/4 font-normal text-primary",
     },
   },

package/src/styles/theme.css

@@ -122,11 +122,11 @@
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.141 0.005 285.823);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.3741 0.0774 245.65);
+  --popover: oklch(0.141 0.005 285.823);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.985 0 0);
   --primary-foreground: oklch(0.3741 0.0774 245.65);
-  --secondary: oklch(0.6058 0.103 199.86);
+  --secondary: oklch(0.9156 0.0315 200);
   --secondary-foreground: oklch(0 0 0);
   --muted: oklch(0.274 0.006 286.033);
   --muted-foreground: oklch(0.705 0.015 286.067);

package/src/styles/typography.css

@@ -9,11 +9,10 @@
   .heading-1,
   .heading-2,
   .heading-3 {
-    font-family: var(--font-sans-accent);
-    color: var(--primary);
+    @apply font-sans-accent text-primary font-normal;
+
     text-wrap: balance;
     letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-normal);
     --tw-tracking: var(--tracking-tight);
     line-height: 1.125em;
   }
@@ -54,82 +53,66 @@
   }
 
   p {
-    --tw-leading: --spacing(6);
-    line-height: --spacing(6);
+    @apply leading-6 text-foreground;
   }
 
   a {
-    text-decoration-line: underline;
-    text-underline-offset: 4px;
+    @apply no-underline underline-offset-4;
 
     &:hover {
       @apply text-shadow-lg text-shadow-complement-1-50;
     }
 
     &:focus-visible {
-      outline-color: var(--color-ring);
-      outline-style: solid;
-      outline-offset: 0;
-      outline-width: calc(var(--spacing) * 0.5);
+      @apply outline-ring outline-offset-0 outline-solid outline-2;
     }
 
     &[data-slot] {
-      @apply text-shadow-none;
-      text-decoration-line: none;
+      @apply text-shadow-none no-underline;
     }
   }
 
   .bcc-typography {
     blockquote {
-      color: var(--primary);
-      font-family: var(--font-sans-accent);
-      font-weight: var(--font-weight-medium);
-
-      margin-inline: --spacing(4);
-      margin-block: --spacing(6);
+      @apply text-primary font-sans-accent mx-4 my-6;
 
       & > cite {
         display: block;
         text-align: end;
       }
 
-      @media (width >= 40rem) {
-        margin-inline: --spacing(16);
+      @variant sm {
+        @apply mx-16;
       }
     }
 
     aside {
+      @apply w-xs mt-4 mb-2 mx-auto p-4 border-y-4 text-sidebar-accent-foreground bg-sidebar-accent border-sidebar-border;
+
       display: block;
       float: none;
-      width: var(--container-xs);
-      margin-block-start: --spacing(4);
-      margin-block-end: --spacing(2);
-      margin-inline: auto;
-      padding: --spacing(4);
-      border-block-width: var(--spacing);
 
-      color: var(--color-sidebar-accent-foreground);
-      background-color: var(--color-sidebar-accent);
-      border-color: var(--color-sidebar-border);
+      @variant sm {
+        @apply mx-16;
+      }
 
       @media (width >= 40rem) {
+        @apply ml-2 border-y-0 border-s-4;
+
         float: inline-end;
-        margin-left: --spacing(2);
-        border-block-width: 0px;
-        border-inline-start-width: var(--spacing);
       }
     }
 
     ul,
     ol {
-      margin-left: --spacing(4);
+      @apply ml-4 text-foreground;
 
       & > li {
-        margin-top: --spacing(2);
+        @apply mt-2;
       }
 
-      @media (width >= 40rem) {
-        margin-left: --spacing(8);
+      @variant sm {
+        @apply ml-8;
       }
     }
     ul {
@@ -153,247 +136,173 @@
     }
 
     dl {
-      margin-top: --spacing(2);
+      @apply mt-2 text-foreground;
+
       & > dt {
-        font-family: var(--font-sans-accent);
-        font-weight: var(--font-weight-medium);
-        font-style: italic;
-        margin-top: calc(var(--spacing));
+        @apply font-sans-accent font-medium italic mt-1;
+
         &::after {
           content: ": ";
         }
       }
 
       & > dd {
-        margin-left: --spacing(4);
-        font-size: var(--text-sm);
+        @apply ml-4 text-sm;
       }
     }
 
     details {
-      margin-top: --spacing(4);
-      border-width: 1px;
-      border-radius: var(--radius-container);
-
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
-        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-      transition-timing-function: var(--default-transition-timing-function);
-      transition-duration: var(--default-transition-duration);
+      @apply text-foreground mt-4 border rounded transition ease-in duration-200;
 
       &:hover {
-        background-color: var(--muted);
+        @apply bg-muted;
+      }
+
+      &:focus-within {
+        @apply outline-offset-0 outline-ring outline-2 outline-solid;
       }
 
       & > summary {
-        border-radius: var(--radius-container);
-        padding-inline: --spacing(4);
-        padding-block: --spacing(2);
-        list-style: none;
+        @apply rounded px-4 py-2 list-none;
 
         &::-webkit-details-marker {
           display: none;
         }
 
         &:focus-visible {
-          outline-color: var(--color-ring);
-          outline-style: solid;
-          outline-offset: 0;
-          outline-width: var(--spacing);
+          @apply outline-none;
         }
       }
 
       &[open] {
-        background-color: var(--muted);
-        & > summary {
-          border-bottom-width: 1px;
+        @apply bg-muted;
 
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
+        & > summary {
+          @apply border-b rounded-br-none rounded-bl-none;
         }
 
         & > p {
-          margin: 0;
-          padding: --spacing(4);
+          @apply m-0 p-4;
         }
       }
     }
 
     details + details {
-      margin-top: calc(var(--spacing));
+      @apply mt-1;
     }
 
     address {
-      font-style: italic;
-      margin-block: --spacing(4);
+      @apply text-foreground italic my-4;
     }
 
     code,
     kbd,
     samp {
-      position: relative;
-      color: var(--primary);
-      font-family: var(--font-mono);
-      font-size: var(--text-sm);
-      font-weight: var(--font-weight-medium);
+      @apply relative text-sm text-primary font-mono font-medium;
     }
 
     code {
-      background-color: var(--color-muted);
-      border-radius: var(--radius-sm);
-
-      padding-inline: --spacing(2);
-      padding-block: var(--spacing);
+      @apply bg-muted rounded-sm px-2 py-1;
     }
 
     kbd {
-      text-shadow: var(--text-shadow-sm);
+      @apply text-shadow-sm;
+
       > kbd {
-        white-space: nowrap;
-        padding-inline: --spacing(2);
-        padding-block: var(--spacing);
-        background-color: var(--color-muted);
-        border-radius: var(--radius-sm);
-        border-width: 1px;
-        box-shadow: 0 1px 1px color-mix(in oklab, var(--color-foreground) 20%, transparent),
+        @apply px-2 py-1 bg-muted rounded-sm border whitespace-nowrap;
+
+        box-shadow:
+          0 1px 1px color-mix(in oklab, var(--color-foreground) 20%, transparent),
           0 2px 0 0 color-mix(in oklab, var(--color-background) 20%, transparent) inset;
       }
     }
 
     pre {
-      background-color: var(--color-muted);
-      border-radius: var(--radius-sm);
-      padding: --spacing(4);
-      line-height: var(--text-lg--line-height);
-      font-size: var(--text-sm);
+      @apply bg-muted text-foreground rounded-sm p-4 leading-6 text-sm;
 
       code {
-        padding: 0px;
+        @apply p-0;
       }
     }
 
     del {
-      text-decoration: none;
-      background-color: var(--color-red-200);
-      color: var(--foreground);
-      padding-inline: var(--spacing);
-      &:is(.dark *) {
-        background-color: var(--color-red-900);
+      @apply no-underline bg-red-200 text-foreground px-1;
+
+      @variant dark {
+        @apply bg-red-900;
       }
     }
 
     ins {
-      text-decoration: none;
-      background-color: var(--color-green-200);
-      color: var(--foreground);
-      padding-inline: var(--spacing);
-      &:is(.dark *) {
-        background-color: var(--color-green-900);
+      @apply no-underline bg-green-200 text-foreground px-1;
+
+      @variant dark {
+        @apply bg-green-900;
       }
     }
 
     mark {
-      text-decoration: none;
-      color: var(--foreground);
-      background-color: var(--color-teal-100);
-      padding-inline: var(--spacing);
-      &:is(.dark *) {
-        background-color: var(--color-teal-900);
+      @apply no-underline bg-amber-100 text-foreground px-1;
+
+      @variant dark {
+        @apply bg-amber-900;
       }
     }
 
     abbr {
-      text-underline-offset: 4px;
+      @apply underline-offset-4;
     }
 
     small {
-      font-size: var(--text-sm);
-      line-height: --spacing(6);
+      @apply text-sm leading-4;
     }
 
     /* Table */
     .scroll-enclosure {
-      position: relative;
-      display: block;
-      width: 100%;
-      overflow: auto;
+      @apply relative block w-full overflow-auto;
     }
 
     .bordered-enclosure {
-      border-width: 1px;
-      border-radius: var(--radius-container);
+      @apply border rounded;
     }
 
     table.no-wrap {
       td {
-        white-space: nowrap;
+        @apply whitespace-nowrap;
       }
     }
 
     table {
-      table-layout: auto;
-      position: relative;
-      border-spacing: 0;
-      border-collapse: separate;
-      caption-side: bottom;
-      background-color: var(--background);
-
-      display: block;
-      width: fit-content;
-      max-width: 100%;
-      overflow-x: auto;
-      margin-inline: auto;
+      @apply table-auto relative block border-spacing-0 border-separate caption-bottom bg-background text-foreground w-fit max-w-full overflow-x-auto mx-auto;
 
       .scroll-enclosure > & {
-        display: table;
-        overflow-x: initial;
-        width: 100%;
-        height: 100%;
+        @apply table overflow-x-auto w-full h-full;
       }
     }
 
     caption {
-      color: var(--muted-foreground);
-      margin: 0px;
-      padding: --spacing(2);
-      border-top-width: 1px;
-
-      text-align: center;
-      font-family: var(--font-sans-accent);
-      font-size: var(--text-sm);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.5em;
+      @apply text-muted-foreground m-0 p-2 border-t text-center font-sans-accent text-sm font-medium leading-5;
     }
 
     tr {
-      padding: 0px;
-      margin: 0px;
+      @apply p-0 m-0;
     }
     th,
     td {
-      padding-inline: --spacing(4);
-      padding-block: --spacing(2);
-      text-align: left;
-      vertical-align: top;
-      white-space: pre-wrap;
+      @apply px-4 py-2 text-left align-top whitespace-pre-wrap;
 
       &[align="center"] {
-        text-align: center;
+        @apply text-center;
       }
       &[align="right"] {
-        text-align: right;
+        @apply text-right;
       }
     }
 
     thead {
-      position: sticky;
-      z-index: 5;
-      top: 0px;
+      @apply sticky z-5 top-0;
       & th {
-        border-bottom-width: 1px;
-        font-family: var(--font-sans-accent);
-        font-weight: var(--font-weight-semibold);
-        background-color: var(--color-background);
-        vertical-align: bottom;
+        @apply bg-background text-foreground align-bottom font-sans-accent font-semibold border-b;
       }
     }
 
@@ -401,78 +310,54 @@
       & > tr:not(:last-child) {
         th,
         td {
-          border-bottom-width: 1px;
+          @apply border-b;
         }
       }
     }
 
     tfoot {
-      position: sticky;
-      z-index: 5;
-      bottom: 0px;
+      @apply sticky z-5 bottom-0;
       th,
       td {
-        background-color: var(--muted);
-        font-family: var(--font-sans-accent);
-        font-weight: var(--font-weight-medium);
-        border-top-width: 1px;
+        @apply bg-muted text-foreground font-sans-accent font-medium border-t;
       }
     }
 
     /* Media */
     :is(img, audio, video, iframe) {
-      border-width: 1px;
-      border-radius: var(--radius-container);
-      overflow: hidden;
-      max-width: 100%;
-      margin-inline: auto;
+      @apply border rounded overflow-hidden max-w-full mx-auto;
     }
 
     :is(audio, video, iframe)::-webkit-media-controls-enclosure {
-      border-radius: 0px;
+      @apply rounded-none;
     }
 
     video,
     iframe {
-      object-fit: cover;
+      @apply object-cover;
     }
 
     /* Figure */
     figure {
-      position: relative;
-      border-width: 1px;
-      border-radius: var(--radius-container);
-      overflow: hidden;
-      margin-inline: auto;
-      width: fit-content;
-      max-width: 100%;
+      @apply relative border rounded overflow-hidden mx-auto w-fit max-w-full;
 
       & > figcaption {
-        color: var(--muted-foreground);
-        margin: 0px;
-        padding: --spacing(2);
-        text-align: center;
-        font-family: var(--font-sans-accent);
-        font-size: var(--text-sm);
-        font-weight: var(--font-weight-medium);
-        line-height: 1.5em;
+        @apply text-muted-foreground m-0 p-2 text-center font-sans-accent text-sm font-medium leading-6;
 
         &:first-child {
-          font-weight: var(--font-weight-bold);
-          border-bottom-width: 1px;
+          @apply font-bold border-b;
         }
         &:last-child {
-          border-top-width: 1px;
+          @apply border-t;
         }
       }
 
       :is(img, audio, video, iframe, .bordered-enclosure) {
-        border-radius: 0;
-        border: none;
+        @apply border-none rounded-none;
       }
 
       :is(img, video, iframe) {
-        object-fit: contain;
+        @apply object-contain;
       }
     }
 
@@ -486,7 +371,7 @@
     pre,
     figure {
       &:not(:first-child) {
-        margin-top: --spacing(4);
+        @apply mt-4;
       }
     }
   }

package/vite.ladle.config.ts

@@ -1,8 +1,8 @@
-import path from "path"
-import { fileURLToPath } from "url"
-import tailwindcss from "@tailwindcss/vite"
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import path from "path";
+import { fileURLToPath } from "url";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -14,4 +14,4 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
-})
+});