@bccampus/ui-components 0.1.0

package/src/styles/typography.css

@@ -0,0 +1,479 @@
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-sans-accent);
+  color: var(--primary);
+  text-wrap: balance;
+  letter-spacing: var(--tracking-tight);
+  font-weight: var(--font-weight-medium);
+  --tw-tracking: var(--tracking-tight);
+
+  &:not(:first-child) {
+    margin-top: calc(var(--spacing) * 4);
+  }
+}
+.heading-1,
+.heading-2,
+.heading-3 {
+  font-family: var(--font-sans-accent);
+  color: var(--primary);
+  text-wrap: balance;
+  letter-spacing: var(--tracking-tight);
+  font-weight: var(--font-weight-medium);
+  --tw-tracking: var(--tracking-tight);
+}
+
+h1,
+.heading-1 {
+  font-size: var(--text-4xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: calc(var(--spacing) * 9);
+  scroll-margin-right: calc(var(--spacing) * 18);
+
+  @media (width >= 40rem) {
+    font-size: var(--text-7xl);
+    line-height: calc(var(--spacing) * 18);
+  }
+}
+
+h2,
+.heading-2 {
+  font-size: var(--text-3xl);
+  line-height: calc(var(--spacing) * 9);
+  scroll-margin-right: calc(var(--spacing) * 9);
+}
+
+h3,
+.heading-3 {
+  font-size: var(--text-xl);
+  line-height: calc(var(--spacing) * 6);
+  scroll-margin-right: calc(var(--spacing) * 6);
+}
+
+p {
+  --tw-leading: calc(var(--spacing) * 6);
+  line-height: calc(var(--spacing) * 6);
+
+  &:not(:first-child) {
+    margin-top: calc(var(--spacing) * 4);
+  }
+}
+
+blockquote {
+  color: var(--primary);
+  font-family: var(--font-sans-accent);
+  font-weight: var(--font-weight-medium);
+
+  margin-inline: calc(var(--spacing) * 4);
+  margin-block: calc(var(--spacing) * 6);
+
+  & > cite {
+    display: block;
+    text-align: end;
+  }
+
+  @media (width >= 40rem) {
+    margin-inline: calc(var(--spacing) * 16);
+  }
+}
+
+aside {
+  display: block;
+  float: none;
+  width: var(--container-xs);
+  margin-block-start: calc(var(--spacing) * 4);
+  margin-block-end: calc(var(--spacing) * 2);
+  margin-inline: auto;
+  padding: calc(var(--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);
+
+  @media (width >= 40rem) {
+    float: inline-end;
+    margin-left: calc(var(--spacing) * 2);
+    border-block-width: 0px;
+    border-inline-start-width: var(--spacing);
+  }
+}
+
+a {
+  text-decoration-line: underline;
+  text-underline-offset: 4px;
+
+  &:focus-visible {
+    outline-color: var(--color-ring);
+    outline-style: solid;
+    outline-offset: 0;
+    outline-width: var(--spacing);
+  }
+
+  &[data-slot] {
+    text-decoration-line: none;
+  }
+}
+
+ul,
+ol {
+  margin-left: calc(var(--spacing) * 4);
+
+  & > li {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  @media (width >= 40rem) {
+    margin-left: calc(var(--spacing) * 8);
+  }
+}
+ul {
+  list-style-type: disc;
+}
+li > ul {
+  list-style-type: circle;
+}
+li > ul > li > ul {
+  list-style-type: square;
+}
+
+ol {
+  list-style-type: decimal;
+}
+li > ol {
+  list-style-type: lower-alpha;
+}
+li > ol > li > ol {
+  list-style-type: lower-roman;
+}
+
+dl {
+  margin-top: calc(var(--spacing) * 2);
+  & > dt {
+    font-family: var(--font-sans-accent);
+    font-weight: var(--font-weight-medium);
+    font-style: italic;
+    margin-top: calc(var(--spacing));
+    &::after {
+      content: ": ";
+    }
+  }
+
+  & > dd {
+    margin-left: calc(var(--spacing) * 4);
+    font-size: var(--text-sm);
+  }
+}
+
+details {
+  margin-top: calc(var(--spacing) * 4);
+  border-width: 1px;
+  border-radius: var(--container-radius);
+
+  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);
+
+  &:hover {
+    background-color: var(--muted);
+  }
+
+  & > summary {
+    border-radius: var(--container-radius);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:focus-visible {
+      outline-color: var(--color-ring);
+      outline-style: solid;
+      outline-offset: 0;
+      outline-width: var(--spacing);
+    }
+  }
+
+  &[open] {
+    background-color: var(--muted);
+    & > summary {
+      border-bottom-width: 1px;
+
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    & > p {
+      margin: 0;
+      padding: calc(var(--spacing) * 4);
+    }
+  }
+}
+
+details + details {
+  margin-top: calc(var(--spacing));
+}
+
+address {
+  font-style: italic;
+  margin-block: calc(var(--spacing) * 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);
+}
+
+code {
+  background-color: var(--color-muted);
+  border-radius: var(--radius-sm);
+
+  padding-inline: calc(var(--spacing) * 2);
+  padding-block: var(--spacing);
+}
+
+kbd {
+  text-shadow: var(--text-shadow-sm);
+  > kbd {
+    white-space: nowrap;
+    padding-inline: calc(var(--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),
+      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: calc(var(--spacing) * 4);
+  line-height: var(--text-lg--line-height);
+  font-size: var(--text-sm);
+
+  &:not(:first-child) {
+    margin-top: calc(var(--spacing) * 4);
+  }
+
+  code {
+    padding: 0px;
+  }
+}
+
+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);
+  }
+}
+
+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);
+  }
+}
+
+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);
+  }
+}
+
+abbr {
+  text-underline-offset: 4px;
+}
+
+/* Table */
+.scroll-enclosure {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: auto;
+  &:not(:first-child) {
+    margin-top: calc(var(--spacing) * 4);
+  }
+}
+
+.bordered-enclosure {
+  border-width: 1px;
+  border-radius: var(--container-radius);
+}
+
+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;
+
+  .scroll-enclosure > & {
+    display: table;
+    overflow-x: initial;
+    width: 100%;
+    height: 100%;
+  }
+
+  &:not(:first-child) {
+    margin-top: calc(var(--spacing) * 4);
+  }
+}
+
+caption {
+  color: var(--muted-foreground);
+  margin: 0px;
+  padding: calc(var(--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;
+}
+
+tr {
+  padding: 0px;
+  margin: 0px;
+}
+th,
+td {
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: calc(var(--spacing) * 2);
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &[align="center"] {
+    text-align: center;
+  }
+  &[align="right"] {
+    text-align: right;
+  }
+}
+
+thead {
+  position: sticky;
+  z-index: 5;
+  top: 0px;
+  & 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;
+  }
+}
+
+tbody {
+  & > tr:not(:last-child) {
+    th,
+    td {
+      border-bottom-width: 1px;
+    }
+  }
+}
+
+tfoot {
+  position: sticky;
+  z-index: 5;
+  bottom: 0px;
+  th,
+  td {
+    background-color: var(--muted);
+    font-family: var(--font-sans-accent);
+    font-weight: var(--font-weight-medium);
+    border-top-width: 1px;
+  }
+}
+
+/* Media */
+:is(img, audio, video) {
+  border-width: 1px;
+  border-radius: var(--container-radius);
+  overflow: hidden;
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+:is(audio, video)::-webkit-media-controls-enclosure {
+  border-radius: 0px;
+}
+
+video {
+  object-fit: cover;
+}
+
+/* Figure */
+figure {
+  position: relative;
+  border-width: 1px;
+  border-radius: var(--container-radius);
+  overflow: hidden;
+  margin-inline: auto;
+  width: fit-content;
+  max-width: 100%;
+
+  &:not(:first-child) {
+    margin-top: calc(var(--spacing) * 4);
+  }
+
+  & > figcaption {
+    color: var(--muted-foreground);
+    margin: 0px;
+    padding: calc(var(--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;
+
+    &:first-child {
+      font-weight: var(--font-weight-bold);
+      border-bottom-width: 1px;
+    }
+    &:last-child {
+      border-top-width: 1px;
+    }
+  }
+
+  :is(img, audio, video, .bordered-enclosure) {
+    border-radius: 0;
+    border: none;
+  }
+
+  :is(img, video) {
+    object-fit: contain;
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src",
+    ".ladle"
+  ],
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,44 @@
+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 dts from 'vite-plugin-dts'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss(), dts({ rollupTypes: true, tsconfigPath: './tsconfig.app.json' })],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    lib: {
+      formats: ['es'],
+      entry: {
+        'ui-components': path.resolve(__dirname, 'src/components/ui/index.ts'),
+        'button': path.resolve(__dirname, 'src/components/ui/button.tsx'),
+        'card': path.resolve(__dirname, 'src/components/ui/card.tsx'),
+        'caption': path.resolve(__dirname, 'src/components/ui/typography/caption.tsx'),
+        'tag': path.resolve(__dirname, 'src/components/ui/tag.tsx'),
+        'horizontal-list': path.resolve(__dirname, 'src/components/ui/horizontal-list.tsx'),
+        'icon-generator': path.resolve(__dirname, 'src/components/ui/icon-generator/icon-generator.tsx'),
+        'masked-image-generator': path.resolve(__dirname, 'src/components/ui/icon-generator/masked-image-generator.tsx'),
+        'utils': path.resolve(__dirname, 'src/lib/utils.ts'),
+      },
+      name: 'ui-components',
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom/client',
+        'react/jsx-dev-runtime',
+        'tailwindcss',
+        'tw-animate-css'
+      ],
+    },
+  },
+})