@pittorica/section-react 0.24.0 → 0.26.0

package/README.md

@@ -11,8 +11,16 @@ npm install @pittorica/section-react
 ## Usage
 
 ```jsx
-import { Section } from '@pittorica/section-react';
-// TODO: Add usage example
+import { Section, Heading, Text } from '@pittorica/react';
+
+function MyPage() {
+  return (
+    <Section size="3">
+      <Heading>About Us</Heading>
+      <Text>Modular and accessible design system.</Text>
+    </Section>
+  );
+}
 ```
 
 ## License

package/dist/Section.d.ts

@@ -1,11 +1,19 @@
+import { type ElementType } from 'react';
 import { type BoxProps } from '@pittorica/box-react';
-export interface SectionProps extends BoxProps {
+export type SectionProps<E extends ElementType = 'section'> = BoxProps<E> & {
     /**
      * Vertical padding size.
      * Maps to responsive padding values in CSS.
      * @default '3'
      */
-    size?: '1' | '2' | '3';
-}
-export declare const Section: ({ children, as: Tag, size, className, ...props }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+    size?: '1' | '2' | '3' | '4';
+};
+/**
+ * Section component for high-level page layout.
+ * Fully polymorphic and agnostic foundation.
+ */
+export declare const Section: {
+    <E extends ElementType = "section">({ children, as, size, className, ...props }: SectionProps<E>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=Section.d.ts.map

package/dist/Section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../src/Section.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,GAAI,kDAMrB,YAAY,4CAWd,CAAC"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../src/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IAC1E;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO;KAAI,CAAC,SAAS,WAAW,2DAM1C,YAAY,CAAC,CAAC,CAAC;;CAajB,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export type { SectionProps } from './Section.js';
-export { Section } from './Section.js';
+export * from './Section.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -1,100 +1,93 @@
-import { jsx as y } from "react/jsx-runtime";
-function b(r) {
-  var a, i, t = "";
-  if (typeof r == "string" || typeof r == "number") t += r;
-  else if (typeof r == "object") if (Array.isArray(r)) {
-    var o = r.length;
-    for (a = 0; a < o; a++) r[a] && (i = b(r[a])) && (t && (t += " "), t += i);
-  } else for (i in r) r[i] && (t && (t += " "), t += i);
-  return t;
+import { jsx as x } from "react/jsx-runtime";
+function T(i) {
+  var p, r, a = "";
+  if (typeof i == "string" || typeof i == "number") a += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var o = i.length;
+    for (p = 0; p < o; p++) i[p] && (r = T(i[p])) && (a && (a += " "), a += r);
+  } else for (r in i) i[r] && (a && (a += " "), a += r);
+  return a;
 }
-function S() {
-  for (var r, a, i = 0, t = "", o = arguments.length; i < o; i++) (r = arguments[i]) && (a = b(r)) && (t && (t += " "), t += a);
-  return t;
+function k() {
+  for (var i, p, r = 0, a = "", o = arguments.length; r < o; r++) (i = arguments[r]) && (p = T(i)) && (a && (a += " "), a += p);
+  return a;
 }
-function $(r) {
-  var a, i, t = "";
-  if (typeof r == "string" || typeof r == "number") t += r;
-  else if (typeof r == "object") if (Array.isArray(r)) {
-    var o = r.length;
-    for (a = 0; a < o; a++) r[a] && (i = $(r[a])) && (t && (t += " "), t += i);
-  } else for (i in r) r[i] && (t && (t += " "), t += i);
-  return t;
+function N(i) {
+  var p, r, a = "";
+  if (typeof i == "string" || typeof i == "number") a += i;
+  else if (typeof i == "object") if (Array.isArray(i)) {
+    var o = i.length;
+    for (p = 0; p < o; p++) i[p] && (r = N(i[p])) && (a && (a += " "), a += r);
+  } else for (r in i) i[r] && (a && (a += " "), a += r);
+  return a;
 }
-function k() {
-  for (var r, a, i = 0, t = "", o = arguments.length; i < o; i++) (r = arguments[i]) && (a = $(r)) && (t && (t += " "), t += a);
-  return t;
+function z() {
+  for (var i, p, r = 0, a = "", o = arguments.length; r < o; r++) (i = arguments[r]) && (p = N(i)) && (a && (a += " "), a += p);
+  return a;
 }
-const x = ({
-  ref: r,
-  as: a = "div",
-  children: i,
-  display: t,
-  m: o,
-  mt: n,
-  mr: p,
-  mb: s,
-  ml: c,
+const A = ({
+  as: i,
+  children: p,
+  display: r,
+  m: a,
+  mt: o,
+  mr: e,
+  mb: d,
+  ml: m,
+  mx: c,
+  my: s,
   p: f,
-  pt: m,
+  pt: v,
   pr: l,
-  pb: g,
-  pl: d,
-  width: h,
-  height: u,
-  position: v,
-  style: A,
-  className: N,
-  href: j,
-  target: w,
-  rel: B,
-  htmlFor: F,
-  type: L,
-  name: R,
-  disabled: T,
+  pb: u,
+  pl: y,
+  px: n,
+  py: g,
+  width: $,
+  height: h,
+  position: b,
+  style: B,
+  className: L,
+  disabled: R,
+  required: j,
   ...q
 }) => {
-  const e = {};
-  t && (e.display = t), h && (e.width = h), u && (e.height = u), v && (e.position = v), o && (e.margin = `var(--pittorica-space-${o})`), n && (e.marginTop = `var(--pittorica-space-${n})`), p && (e.marginRight = `var(--pittorica-space-${p})`), s && (e.marginBottom = `var(--pittorica-space-${s})`), c && (e.marginLeft = `var(--pittorica-space-${c})`), f && (e.padding = `var(--pittorica-space-${f})`), m && (e.paddingTop = `var(--pittorica-space-${m})`), l && (e.paddingRight = `var(--pittorica-space-${l})`), g && (e.paddingBottom = `var(--pittorica-space-${g})`), d && (e.paddingLeft = `var(--pittorica-space-${d})`);
-  const z = {
-    ...A,
-    ...e
+  const S = i || "div", t = {};
+  r && (t.display = r), $ && (t.width = $), h && (t.height = h), b && (t.position = b), a && (t.margin = `var(--pittorica-space-${a})`), o && (t.marginTop = `var(--pittorica-space-${o})`), e && (t.marginRight = `var(--pittorica-space-${e})`), d && (t.marginBottom = `var(--pittorica-space-${d})`), m && (t.marginLeft = `var(--pittorica-space-${m})`), c && (t.marginLeft = `var(--pittorica-space-${c})`, t.marginRight = `var(--pittorica-space-${c})`), s && (t.marginTop = `var(--pittorica-space-${s})`, t.marginBottom = `var(--pittorica-space-${s})`), f && (t.padding = `var(--pittorica-space-${f})`), v && (t.paddingTop = `var(--pittorica-space-${v})`), l && (t.paddingRight = `var(--pittorica-space-${l})`), u && (t.paddingBottom = `var(--pittorica-space-${u})`), y && (t.paddingLeft = `var(--pittorica-space-${y})`), n && (t.paddingLeft = `var(--pittorica-space-${n})`, t.paddingRight = `var(--pittorica-space-${n})`), g && (t.paddingTop = `var(--pittorica-space-${g})`, t.paddingBottom = `var(--pittorica-space-${g})`);
+  const w = {
+    ...B,
+    ...t
   };
-  return /* @__PURE__ */ y(
-    a,
+  return /* @__PURE__ */ x(
+    S,
     {
-      ref: r,
-      className: k("pittorica-box", N),
-      style: z,
-      href: j,
-      target: w,
-      rel: B,
-      htmlFor: F,
-      type: L,
-      name: R,
-      disabled: T,
+      className: z("pittorica-box", L),
+      style: w,
+      disabled: R,
+      required: j,
       ...q,
-      children: i
+      children: p
     }
   );
 };
-x.displayName = "Box";
-const D = ({
-  children: r,
-  as: a = "section",
-  size: i = "3",
-  className: t,
+A.displayName = "Box";
+const C = ({
+  children: i,
+  as: p,
+  size: r = "3",
+  className: a,
   ...o
-}) => /* @__PURE__ */ y(
-  x,
+}) => /* @__PURE__ */ x(
+  A,
   {
-    as: a,
-    className: S("pittorica-section", t),
-    "data-size": i,
+    as: p || "section",
+    className: k("pittorica-section", a),
+    "data-size": r,
     ...o,
-    children: r
+    children: i
   }
 );
+C.displayName = "Section";
 export {
-  D as Section
+  C as Section
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pittorica/section-react",
-  "version": "0.24.0",
+  "version": "0.26.0",
+  "homepage": "https://pittorica.dcdavidev.me",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,7 +11,7 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "@pittorica/box-react": "0.24.0"
+    "@pittorica/box-react": "0.26.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -20,11 +21,11 @@
     "@vitejs/plugin-react": "^4.0.0",
     "jsdom": "^22.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vitest": "^2.1.9",
-    "@pittorica/theme-react": "0.24.0",
-    "pittorica": "0.24.0",
-    "@pittorica/text-react": "0.24.0"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "@pittorica/theme-react": "0.26.0",
+    "pittorica": "0.26.0",
+    "@pittorica/text-react": "0.26.0"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -34,8 +35,7 @@
     "build": "npm run clean && npm run build:js && npm run build:types",
     "build:js": "vite build",
     "build:types": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist",
-    "dev": "vite",
+    "clean": "rm -rf dist *.tsbuildinfo",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/dist/Section.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Section } from './Section';
-declare const meta: Meta<typeof Section>;
-export default meta;
-type Story = StoryObj<typeof Section>;
-export declare const Default: Story;
-export declare const SmallSize: Story;
-export declare const MediumSize: Story;
-export declare const LargeSize: Story;
-export declare const AsDiv: Story;
-//# sourceMappingURL=Section.stories.d.ts.map

package/dist/Section.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../src/Section.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAiB9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAiBtC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC"}

package/dist/Section.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import '@testing-library/jest-dom';
-//# sourceMappingURL=Section.test.d.ts.map

package/dist/Section.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Section.test.d.ts","sourceRoot":"","sources":["../src/Section.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}